/* ==========================================================================
   TRIAX CERTIFICADORA DIGITAL — folha de estilo única
   Um só arquivo de propósito: o site do VEX tinha o CSS do cabeçalho e do
   rodapé duplicado em dois arquivos, e qualquer ajuste precisava ser feito
   nos dois (foi assim que o menu de uma página quebrou sem a outra quebrar).
   ========================================================================== */

:root {
  /* Marca: TRIAX em azul, CERTIFICADORA em dourado escuro */
  --azul:        #1E5AA8;
  --azul-medio:  #16457F;
  --azul-escuro: #0F2E52;
  --dourado:     #A67C1A;
  --dourado-claro:#C99A2E;
  --dourado-suave:#F5EDDA;

  --ink:        #12233A;
  --texto:      #4A5A6E;
  --texto-fraco:#7B8898;

  --bg:      #FFFFFF;
  --bg-suave:#F4F7FB;
  --bg-azul: #EAF1FA;

  --borda:      #DDE6F2;
  --borda-suave:#EAF0F8;

  --whats:      #25D366;
  --whats-escuro:#1DA851;

  --sombra:      0 2px 12px rgba(18,35,58,.06);
  --sombra-media:0 12px 30px rgba(18,35,58,.10);
  --sombra-forte:0 20px 45px rgba(18,35,58,.16);

  --raio:      12px;
  --raio-grande:20px;
}

* { margin:0; padding:0; box-sizing:border-box; }

/* A folha inteira está em rem, então a base tem que subir aqui — mexer no
   font-size do body não afetaria nada que já declara rem. */
html { font-size:17.5px; scroll-behavior:smooth; }
@media (max-width:600px) { html { font-size:16.5px; } }

body {
  /* Nome da família escrito por extenso e conferido: no site do VEX ele estava
     grafado errado ('montsserat') e o navegador caía no Arial silenciosamente. */
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--texto);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* Largura em % e nunca em vw: 100vw inclui a barra de rolagem e gera
   scroll horizontal na página inteira. */
.container { width:100%; max-width:1160px; margin:0 auto; padding:0 24px; }

section { padding:80px 0; }

/* O cabeçalho é fixo (~78px); todo alvo de âncora precisa reservar essa altura */
section[id], #topo { scroll-margin-top:96px; }

/* ── TIPOGRAFIA ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4 { color:var(--ink); line-height:1.2; font-weight:700; }
h1 { font-size:clamp(1.9rem, 4.2vw, 3.1rem); letter-spacing:-.02em; }
h2 { font-size:clamp(1.6rem, 3vw, 2.35rem); letter-spacing:-.015em; }
h3 { font-size:1.15rem; }

.secao-titulo { text-align:center; max-width:680px; margin:0 auto 48px; }
.secao-titulo p { font-size:1.05rem; margin-top:12px; }

.rotulo {
  display:block; text-align:center;
  color:var(--dourado); font-size:.82rem; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; margin-bottom:12px;
}

/* ── BOTÕES ─────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:10px; border:2px solid transparent;
  font-family:inherit; font-size:1rem; font-weight:700; cursor:pointer;
  white-space:nowrap; transition:background-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.btn-ouro   { background:var(--dourado); color:#fff; box-shadow:0 4px 14px rgba(166,124,26,.32); }
.btn-ouro:hover { background:#8F6A12; box-shadow:0 7px 20px rgba(166,124,26,.42); transform:translateY(-2px); }
.btn-azul   { background:var(--azul); color:#fff; box-shadow:0 4px 14px rgba(30,90,168,.3); }
.btn-azul:hover { background:var(--azul-medio); transform:translateY(-2px); }
.btn-contorno { background:#fff; color:var(--azul); border-color:var(--borda); }
.btn-contorno:hover { border-color:var(--azul); background:var(--bg-azul); }
.btn-whats  { background:var(--whats); color:#fff; box-shadow:0 4px 14px rgba(37,211,102,.32); }
.btn-whats:hover { background:var(--whats-escuro); transform:translateY(-2px); }
.btn svg { width:19px; height:19px; flex:0 0 auto; }

/* ── CABEÇALHO ──────────────────────────────────────────────────────────── */
header {
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--borda-suave);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
/* O padding lateral tem que ser repetido aqui: `.container` e `.navbar` têm a
   mesma especificidade e esta regra vem depois, então um `padding:14px 0`
   zerava o recuo lateral do container e o cabeçalho colava na borda da tela. */
.navbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 24px; }

/* O lockup vai como imagem. A altura é o teto do que a barra do topo comporta:
   acima disso o cabeçalho fica alto demais e come a primeira dobra. */
.logo { display:flex; align-items:center; line-height:1; }
.logo img { width:auto; height:54px; }
/* display:block nos dois: são <span> e, fora de um pai flex-column (como no
   rodapé), ficariam lado a lado em vez de empilhados. */

nav { display:flex; align-items:center; gap:2px; }
nav a {
  color:var(--texto); font-size:.95rem; font-weight:600;
  padding:9px 13px; border-radius:8px;
  white-space:nowrap;              /* impede rótulo quebrar em duas linhas */
  transition:color .2s, background-color .2s;
}
nav a:hover { color:var(--azul); background:var(--bg-azul); }
.nav-ecommerce {
  color:var(--dourado)!important; border:1.5px solid var(--dourado);
  margin-left:6px; padding:8px 16px!important;
}
.nav-ecommerce:hover { background:var(--dourado)!important; color:#fff!important; }
.nav-whats {
  background:var(--whats); color:#fff!important; margin-left:6px; padding:9px 16px!important;
}
.nav-whats:hover { background:var(--whats-escuro); }

.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span { display:block; width:24px; height:2.5px; background:var(--azul); border-radius:2px; transition:.3s; }
.nav-toggle.aberto span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.nav-toggle.aberto span:nth-child(2) { opacity:0; }
.nav-toggle.aberto span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

.nav-mobile { display:none; flex-direction:column; padding:8px 0 16px; border-top:1px solid var(--borda-suave); }
.nav-mobile a { padding:13px 4px; font-size:.98rem; font-weight:600; color:var(--ink); border-bottom:1px solid var(--borda-suave); }
.nav-mobile a:last-child { border-bottom:none; }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse 60% 60% at 15% 0%, rgba(30,90,168,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-suave) 0%, #fff 100%);
  border-bottom:1px solid var(--borda-suave);
  padding:72px 0 84px;
}
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }

.selo-video {
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--borda);
  border-radius:999px; padding:7px 16px;
  font-size:.84rem; font-weight:700; color:var(--azul);
  box-shadow:var(--sombra); margin-bottom:22px;
}
.ponto-vivo { width:8px; height:8px; border-radius:50%; background:var(--whats); position:relative; flex:0 0 auto; }
.ponto-vivo::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid var(--whats); animation:pulso 1.8s ease-out infinite;
}
@keyframes pulso { 0%{transform:scale(.7);opacity:1} 100%{transform:scale(1.5);opacity:0} }

.hero h1 { margin-bottom:18px; }
.hero h1 span { color:var(--azul); }
.hero-lead { font-size:1.12rem; max-width:520px; margin-bottom:28px; }
.hero-acoes { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.hero-nota { display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--texto-fraco); }
.hero-nota strong { color:var(--ink); }

/* Painel de preços — um bloco coeso em vez de dois cartões soltos.
   Cada produto é uma linha clicável: o olho compara os dois de uma vez e
   qualquer ponto da linha leva pro WhatsApp já com a mensagem certa. */
.painel-preco {
  background:#fff; border:1px solid var(--borda);
  border-radius:var(--raio-grande); overflow:hidden;
  box-shadow:var(--sombra-forte);
}
.painel-topo {
  background:linear-gradient(140deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color:#fff; padding:24px 28px 22px; text-align:center;
}
.painel-chapeu {
  display:block; font-size:.74rem; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:#AFC9E8; margin-bottom:6px;
}
.painel-valor { font-size:2.9rem; font-weight:800; line-height:1; letter-spacing:-1.5px; color:#fff; }
.painel-valor span  { font-size:1.15rem; font-weight:700; vertical-align:super; margin-right:3px; color:var(--dourado-claro); }
.painel-valor small { font-size:1.2rem; font-weight:800; }

.oferta {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 28px; border-bottom:1px solid var(--borda-suave);
  transition:background-color .2s;
}
.oferta:hover { background:var(--bg-azul); }
.oferta-nome {
  display:block; font-size:1.06rem; font-weight:800; color:var(--ink); margin-bottom:3px;
}
/* Era `display:inline` com quebra livre: a pílula partia no espaço entre
   "Mais" e "procurado" e ocupava três caixas de linha (46px de altura),
   empurrando a descrição da oferta. inline-block + nowrap mantém o selo
   inteiro numa linha só. */
.oferta-nome em {
  display:inline-block; white-space:nowrap;
  font-style:normal; font-size:.66rem; font-weight:800; letter-spacing:.7px;
  text-transform:uppercase; color:#fff; background:var(--dourado);
  padding:3px 9px; border-radius:4px; margin-left:7px; vertical-align:middle;
}
.oferta-para  { display:block; font-size:.9rem; color:var(--texto-fraco); }
.oferta-preco {
  flex:0 0 auto; font-size:1.42rem; font-weight:800;
  color:var(--dourado); white-space:nowrap; letter-spacing:-.5px;
}
.oferta-preco small { font-size:.85rem; font-weight:800; }

.painel-rodape {
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 24px; background:var(--bg-suave);
  font-size:.84rem; font-weight:600; color:var(--texto);
}
.painel-rodape svg { width:17px; height:17px; color:var(--azul); flex:0 0 auto; }

/* ── COMO FUNCIONA ──────────────────────────────────────────────────────── */
#como-funciona { background:var(--bg-suave); }
.passos { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.passo {
  background:#fff; border:1px solid var(--borda-suave);
  border-radius:var(--raio-grande); padding:32px 26px;
  box-shadow:var(--sombra); text-align:center;
}
.passo-num {
  width:46px; height:46px; margin:0 auto 16px; border-radius:50%;
  background:var(--bg-azul); color:var(--azul);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:800;
}
.passo h3 { margin-bottom:8px; }
.passo p { font-size:.94rem; }

/* ── CERTIFICADOS ───────────────────────────────────────────────────────── */
.certs { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.cert {
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--borda);
  border-radius:var(--raio-grande); padding:30px 26px; box-shadow:var(--sombra);
  transition:transform .25s, box-shadow .25s;
}
.cert:hover { transform:translateY(-4px); box-shadow:var(--sombra-media); }
.cert-icone {
  width:48px; height:48px; border-radius:12px; margin-bottom:18px;
  background:var(--dourado-suave); color:var(--dourado);
  display:flex; align-items:center; justify-content:center;
}
.cert-icone svg { width:24px; height:24px; }
.cert h3 { margin-bottom:6px; }
.cert-para { display:block; font-size:.86rem; color:var(--dourado); font-weight:700; margin-bottom:12px; }
.cert ul { list-style:none; display:grid; gap:9px; margin:0 0 22px; }
.cert li { display:flex; gap:9px; font-size:.92rem; }
.cert li::before { content:'✓'; color:var(--azul); font-weight:800; flex:0 0 auto; }
.cert-rodape { margin-top:auto; }
.cert-preco { font-size:1.5rem; font-weight:800; color:var(--dourado); margin-bottom:12px; }
.cert-preco small { font-size:.8rem; font-weight:600; color:var(--texto-fraco); display:block; }
.cert .btn { width:100%; }

/* ── CONFIANÇA ──────────────────────────────────────────────────────────── */
#confianca { background:var(--azul-escuro); color:#D6E2F2; }
#confianca h2 { color:#fff; }
#confianca .rotulo { color:var(--dourado-claro); }
#confianca .secao-titulo p { color:#B9CBE2; }
.confia { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.confia-item {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--raio); padding:26px 22px; text-align:center;
}
.confia-item svg { width:30px; height:30px; color:var(--dourado-claro); margin:0 auto 14px; }
.confia-item strong { display:block; color:#fff; font-size:1rem; margin-bottom:6px; }
.confia-item span { font-size:.88rem; color:#B9CBE2; }

/* ── SUPORTE ────────────────────────────────────────────────────────────── */
.suporte-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.suporte-item {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding:28px 18px;
  background:#fff; border:1px solid var(--borda); border-radius:var(--raio);
  color:var(--ink); font-weight:700; font-size:.95rem;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.suporte-item:hover { transform:translateY(-4px); border-color:var(--azul); box-shadow:var(--sombra-media); }
.suporte-icone {
  width:52px; height:52px; border-radius:50%;
  background:var(--bg-azul); color:var(--azul);
  display:flex; align-items:center; justify-content:center;
}
.suporte-icone svg { width:24px; height:24px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
#faq { background:var(--bg-suave); }
.faq-lista { max-width:820px; margin:0 auto; display:grid; gap:12px; }
.faq-item { background:#fff; border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; }
.faq-item summary {
  cursor:pointer; list-style:none; padding:20px 24px;
  font-weight:700; color:var(--ink); font-size:1rem;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'+'; flex:0 0 auto; color:var(--dourado);
  font-size:1.5rem; font-weight:400; line-height:1; transition:transform .25s;
}
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item[open] summary { color:var(--azul); }
.faq-corpo { padding:0 24px 22px; font-size:.95rem; }

/* ── CHAMADA FINAL ──────────────────────────────────────────────────────── */
.cta-final { text-align:center; background:linear-gradient(160deg, var(--azul) 0%, var(--azul-escuro) 100%); color:#fff; }
.cta-final h2 { color:#fff; margin-bottom:14px; }
.cta-final p  { color:#CFDEF0; max-width:560px; margin:0 auto 30px; font-size:1.05rem; }
.cta-final .rotulo { color:var(--dourado-claro); }
.cta-acoes { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

/* ── RODAPÉ ─────────────────────────────────────────────────────────────── */
footer {
  background:var(--ink); color:#B9C6D6; font-size:.92rem;
  padding:56px 0 96px;   /* folga extra pro botão flutuante do WhatsApp */
  border-top:3px solid var(--dourado);
}
.rodape-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.15fr; gap:40px; }
/* No fundo escuro as cores da marca precisam clarear pra manter contraste:
   o azul e o dourado do tema claro somem sobre o #12233A. */
.rodape-desc { margin:16px 0 22px; max-width:300px; color:#B9C6D6; }
.rodape-cta { padding:12px 24px; font-size:.94rem; }
.rodape-contato { display:grid; gap:11px; }
.rodape-contato a, .rodape-endereco {
  display:flex; align-items:flex-start; gap:10px;
  color:#B9C6D6; width:fit-content; line-height:1.5;
  transition:color .2s;
}
.rodape-contato a:hover { color:var(--dourado-claro); }
.rodape-contato svg, .rodape-endereco svg { width:17px; height:17px; flex:0 0 auto; margin-top:3px; opacity:.7; }
.rodape-col strong { display:block; color:#fff; font-size:.95rem; margin-bottom:16px; }
.rodape-links { display:grid; gap:10px; }
.rodape-links a { color:#B9C6D6; width:fit-content; transition:color .2s; }
.rodape-links a:hover { color:var(--dourado-claro); }
.rodape-base {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px;
  margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.82rem; color:#8395A9;
}
.selo-sistemas { display:inline-flex; align-items:center; gap:9px; }
.selo-sistemas::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--whats); box-shadow:0 0 0 3px rgba(37,211,102,.2); }

/* ── WHATSAPP FLUTUANTE ─────────────────────────────────────────────────── */
.whats-fixo {
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:58px; height:58px; border-radius:50%;
  background:var(--whats); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(37,211,102,.45); transition:transform .25s;
}
.whats-fixo:hover { transform:scale(1.08); }
.whats-fixo svg { width:30px; height:30px; }

/* ── RESPONSIVO ─────────────────────────────────────────────────────────── */
@media (max-width:1080px) {
  nav a { font-size:.84rem; padding:8px 10px; }
  .nav-ecommerce, .nav-whats { padding:8px 13px!important; }
}
@media (max-width:1040px) {
  nav { display:none; }
  .nav-toggle { display:flex; }
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .hero-lead { max-width:100%; }
  .passos, .certs { grid-template-columns:1fr; }
  .confia, .suporte-grid { grid-template-columns:repeat(2,1fr); }
  .rodape-grid { grid-template-columns:1fr 1fr; gap:34px; }
  .rodape-brand { grid-column:1/-1; }
  .rodape-desc { max-width:460px; }
}
@media (max-width:600px) {
  section { padding:58px 0; }
  .container { padding:0 18px; }
  .hero { padding:52px 0 62px; }
  .hero-acoes .btn { width:100%; }
  .confia, .suporte-grid { grid-template-columns:1fr; }
  .rodape-grid { grid-template-columns:1fr; }
  .rodape-base { flex-direction:column; text-align:center; }
  .cta-acoes .btn { width:100%; }
  .painel-topo { padding:20px 22px 18px; }
  .oferta { padding:16px 20px; gap:12px; }
  .oferta-nome { font-size:1rem; }
  .oferta-preco { font-size:1.25rem; }
}

@media (prefers-reduced-motion:reduce) {
  * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ==========================================================================
   ACRÉSCIMOS — identidade, movimento e profundidade
   ========================================================================== */

/* ── SÍMBOLO NO RODAPÉ ── */
.rodape-logo { width:100%; max-width:290px; height:auto; margin-bottom:18px; }

/* ── DESTAQUE NOS TÍTULOS ──
   Só cor, na mesma família do resto: marca a segunda metade do título sem
   trocar de voz tipográfica. Nas faixas escuras vira dourado, que é o único
   dos dois tons da marca que se sustenta sobre o azul-marinho. */
.secao-titulo h2 span { color:var(--azul); }
#confianca h2 span,
.cta-final h2 span { color:var(--dourado-claro); }

/* ── CONSTELAÇÃO ──
   Só nas faixas escuras. O hero é claro de propósito: numa certificadora,
   clareza lê como confiança, e escurecê-lo mudaria a identidade do negócio.
   Nas seções escuras a rede de nós conectados ainda diz algo verdadeiro
   sobre o produto — cadeia de confiança, ICP-Brasil. */
.tem-constelacao { position:relative; isolation:isolate; }
.constelacao {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
}
.tem-constelacao > .container { position:relative; z-index:1; }

/* ── BRILHO QUE ATRAVESSA O BOTÃO ── */
.btn-ouro, .btn-azul, .btn-whats { position:relative; overflow:hidden; }
.btn-ouro::after, .btn-azul::after, .btn-whats::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform:translateX(-130%);
  animation:brilho-btn 4.6s ease-in-out infinite;
  pointer-events:none;
}
/* o conteúdo precisa ficar acima da faixa de brilho */
.btn-ouro > *, .btn-azul > *, .btn-whats > * { position:relative; z-index:1; }
@keyframes brilho-btn {
  0%, 62%   { transform:translateX(-130%); }
  86%, 100% { transform:translateX(130%); }
}

/* ── ENTRADA DO HERO E REVELAÇÃO NO SCROLL ──
   O site não tinha movimento nenhum (um único @keyframes, o do pontinho
   verde). A classe .js-anima só é adicionada pelo site.js, então sem JS
   nada fica escondido. */
.js-anima .entra { opacity:0; transform:translateY(20px); }
.js-anima .entra.dentro {
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion:reduce) {
  .btn-ouro::after, .btn-azul::after, .btn-whats::after { animation:none; opacity:0; }
  .js-anima .entra { opacity:1; transform:none; }
  .js-anima .entra.dentro { transition:none; }
}