/* solucao.css — usado pelas 6 paginas de solucao (/atera/, /keeper/, /cove/,
   /bitdefender/, /microsoft-365/, /wazuh/). Editado pelo chat SOLUCOES.

   Uma folha para as seis: as paginas tem a mesma estrutura e mudam so o texto.
   Seis arquivos identicos seriam seis lugares para esquecer de corrigir. */

/* ============================================================
   ATENCAO: .fundo-vivo, o cursor e .secao__cabeca / .chamada sao
   dirigidos pelo main.js ou usados por todas as paginas, mas hoje
   vivem no home.css. Ate o chat ESTRUTURA promove-los para a base,
   cada pagina precisa redeclara-los. O contato.css faz o mesmo.
   ============================================================ */

.fundo-vivo { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.fundo-vivo::before {
  content: ""; position: absolute; inset: -50%;
  background-image:
    linear-gradient(rgba(47,125,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,125,255,.055) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 65% 55% at 50% 30%, #000 20%, transparent 75%);
  animation: deslizar-grade 22s linear infinite;
}
@keyframes deslizar-grade { to { transform: translate(58px, 58px); } }

.cursor-ponto, .cursor-anel {
  position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none;
  border-radius: 50%; opacity: 0; transition: opacity .3s ease;
}
.cursor-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ciano); box-shadow: 0 0 12px var(--ciano); }
.cursor-anel  { width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid rgba(34, 211, 238, .5); }
.cursor-anel--ativo { border-color: rgba(34, 211, 238, .95); }

/* A home usa ate 8rem de respiro por secao — la os blocos sao densos e visuais.
   Aqui o conteudo e texto corrido: com o mesmo ritmo, sobrava uma tela INTEIRA
   em branco entre um bloco e outro (o documento passava de 6000px). Escopo em
   #conteudo para nao vazar caso esta folha seja carregada em outro lugar. */
#conteudo .secao { padding-block: clamp(3rem, 6vw, 5rem); }

.secao__cabeca { max-width: 52ch; margin-bottom: var(--esp-4); }
.secao__cabeca h2 { margin: var(--esp-2) 0 var(--esp-2); }
.secao__cabeca p { color: var(--texto-suave); }

/* faixa levemente mais clara, para as secoes nao virarem uma parede so */
.secao--alta { background: linear-gradient(180deg, transparent, rgba(10,20,38,.55), transparent); }

.chamada { position: relative; text-align: center; border: 1px solid var(--borda-viva); border-radius: 20px; padding: clamp(2.5rem, 7vw, 4.5rem) var(--esp-3); overflow: hidden; background: linear-gradient(160deg, var(--superficie), var(--fundo-2)); }
.chamada::before { content: ""; position: absolute; inset: -60% 30%; background: conic-gradient(from 0deg, transparent, rgba(47,125,255,.16), transparent 40%); animation: girar 9s linear infinite; }
@keyframes girar { to { transform: rotate(1turn); } }
.chamada > * { position: relative; }
.chamada h2 { margin-bottom: var(--esp-2); }
.chamada p { color: var(--texto-suave); max-width: 48ch; margin-inline: auto; margin-bottom: var(--esp-3); }

/* rodape: substitui os style= inline que a home ainda usa */
.rodape__frase { font-size: .92rem; max-width: 32ch; margin-top: var(--esp-2); }
.rodape__nota { font-size: .78rem; }

/* ============ hero ============ */
.sol-hero { position: relative; padding: 9rem 0 var(--esp-5); }
.sol-hero__grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--esp-5); align-items: center; }

.migalha { font-family: var(--fonte-mono); font-size: .78rem; color: var(--texto-fraco); margin-bottom: var(--esp-3); display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.migalha a { color: var(--texto-suave); }
.migalha a:hover { color: var(--ciano); }
.migalha [aria-current] { color: var(--ciano); }

.sol-hero h1 { margin: var(--esp-3) 0 var(--esp-2); }
.sol-hero__lead { color: var(--texto-suave); font-size: clamp(1.02rem, 1.7vw, 1.2rem); max-width: 52ch; }
.sol-hero__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-4); }

.sol-hero__marca {
  display: grid; place-items: center; gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-3);
  border: 1px solid var(--borda); border-radius: 20px;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(47,125,255,.14), transparent 70%), var(--superficie);
}
.sol-hero__marca img { max-height: 96px; width: auto; max-width: 100%; }
.sol-hero__cat {
  font-family: var(--fonte-mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ciano);
}

/* ============ o que e + glossario ============ */
.sol-def { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--esp-5); align-items: start; }
.sol-def__texto h2 { margin: var(--esp-2) 0 var(--esp-3); }
.sol-def__texto p { color: var(--texto-suave); max-width: 64ch; margin-bottom: var(--esp-2); font-size: 1.02rem; }
.sol-def__texto b { color: var(--texto); }
.sol-def__texto i { color: var(--ciano-suave); font-style: italic; }

.glossario {
  position: sticky; top: 6.5rem;
  border: 1px solid var(--borda-viva); border-left: 3px solid var(--ciano);
  border-radius: var(--raio); padding: var(--esp-3);
  background: var(--superficie);
}
.glossario__marca { font-family: var(--fonte-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-fraco); }
.glossario__termo { font-size: 1.3rem; font-weight: 700; margin-top: var(--esp-1); }
.glossario__exp { color: var(--ciano); font-size: .85rem; margin-top: .25rem; }
.glossario__resumo { color: var(--texto-suave); font-size: .92rem; margin-top: var(--esp-2); padding-top: var(--esp-2); border-top: 1px solid var(--borda); }

/* ============ o que faz ============ */
.funcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); }
.func {
  padding: var(--esp-3); border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie); position: relative; overflow: hidden;
  transition: transform var(--transicao), border-color var(--transicao), background var(--transicao);
}
.func::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--ciano), transparent);
  transition: opacity var(--transicao);
}
.func:hover { transform: translateY(-4px); border-color: var(--borda-viva); background: var(--superficie-alta); }
.func:hover::before { opacity: 1; }
.func h3 { margin-bottom: .5rem; }
.func p { color: var(--texto-suave); font-size: .92rem; }

/* ============ contraste sem / com ============ */
.contraste { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); }
.contraste__col { padding: var(--esp-4) var(--esp-3); border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.contraste__col--sem { border-color: rgba(255, 77, 94, .35); }
.contraste__col--com { border-color: rgba(34, 197, 94, .35); }

.contraste__titulo { font-family: var(--fonte-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--esp-3); }
.contraste__col--sem .contraste__titulo { color: var(--ameaca); }
.contraste__col--com .contraste__titulo { color: var(--seguro); }

.contraste__lista { list-style: none; padding: 0; display: grid; gap: var(--esp-2); }
.contraste__lista li { color: var(--texto-suave); font-size: .95rem; padding-left: 1.6rem; position: relative; }
.contraste__lista li::before { position: absolute; left: 0; top: 0; font-family: var(--fonte-mono); }
.contraste__col--sem .contraste__lista li::before { content: "\2717"; color: var(--ameaca); }
.contraste__col--com .contraste__lista li::before { content: "\2713"; color: var(--seguro); }

/* ============ destaques do produto ============ */
.destaques { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); }
.destaque-item {
  padding: var(--esp-3); border: 1px solid var(--borda); border-radius: var(--raio);
  background: linear-gradient(160deg, var(--superficie), var(--fundo-2));
  transition: border-color var(--transicao), transform var(--transicao);
}
.destaque-item:hover { border-color: var(--borda-viva); transform: translateY(-4px); }
.destaque-item h3 { color: var(--azul-claro); margin-bottom: .5rem; }
.destaque-item p { color: var(--texto-suave); font-size: .92rem; }
.destaque-item a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ papel da mooby ============ */
.sol-mooby { max-width: 62ch; }
.sol-mooby h2 { margin: var(--esp-2) 0 var(--esp-2); }
.sol-mooby__lista { list-style: none; padding: 0; display: grid; gap: var(--esp-2); margin-top: var(--esp-4); }
.sol-mooby__lista li { position: relative; padding-left: 2rem; color: var(--texto-suave); }
.sol-mooby__lista li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ciano); box-shadow: 0 0 14px var(--ciano);
}

/* ============ outras solucoes ============ */
.outras { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--esp-2); }
.outra {
  display: grid; place-items: center; gap: .5rem; text-align: center;
  padding: var(--esp-3) var(--esp-2); border: 1px solid var(--borda);
  border-radius: var(--raio); background: var(--superficie); color: var(--texto);
  transition: transform var(--transicao), border-color var(--transicao), background var(--transicao);
}
.outra:hover { transform: translateY(-6px); border-color: var(--borda-viva); background: var(--superficie-alta); color: var(--texto); }
.outra__marca { height: 56px; display: grid; place-items: center; }
.outra__marca img { max-height: 46px; max-width: 100%; width: auto; filter: grayscale(.45) brightness(.92); transition: filter var(--transicao); }
.outra:hover .outra__marca img { filter: none; }
.outra__cat { font-family: var(--fonte-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ciano); }
.outra__nome { font-weight: 600; font-size: .98rem; }

/* ============ responsivo ============ */
@media (max-width: 1050px) {
  .sol-hero__grade { grid-template-columns: 1fr; gap: var(--esp-4); }
  .sol-hero__marca { order: -1; padding: var(--esp-4) var(--esp-3); }
  .sol-def { grid-template-columns: 1fr; }
  .glossario { position: static; }
  .funcs, .destaques { grid-template-columns: repeat(2, 1fr); }
  .outras { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .sol-hero { padding-top: 7.5rem; }
  .contraste { grid-template-columns: 1fr; }
  .outras { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .funcs, .destaques { grid-template-columns: 1fr; }
  .sol-hero__acoes .btn { width: 100%; justify-content: center; }
}