/* MoveOnAgents - camada da identidade ZDZCloud sobre os componentes herdados.
   Manual da Marca e Compliance (ZDZCloud.Marketing), secoes 2.2 e 2.3:
   - a marca foi desenhada para FUNDO ESCURO: hero e faixas escuras em #0a0e27 com a grade azul;
   - Space Grotesk nos titulos, Manrope no corpo, JetBrains Mono nos sobretitulos "// SECAO";
   - o azul de texto escurece no claro (#0f92c4) para manter contraste; #34c6f4 e destaque. */

/* ---------- tipografia ---------- */
h1, h2, h3, h4,
.titulo-sec, .cartao-hero__nome, .perfil__corpo h1, .chamada h2 {
  font-family: var(--fonte-titulo);
  letter-spacing: -0.025em;
}
.hero--home h1 { letter-spacing: -0.035em; }

.sobretitulo {
  font-family: var(--fonte-mono);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sobretitulo::before {
  content: "//";
  width: auto; height: auto;
  background: none; border-radius: 0; box-shadow: none;
  color: var(--marca-acento);
  font-weight: 600;
  letter-spacing: 0;
}

/* ---------- marca ---------- */
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--marca-noite); text-decoration: none; }
.marca__simbolo { display: inline-flex; color: var(--marca-noite); }
.marca__simbolo svg { display: block; }
.marca__nome { font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--marca-noite); }
.marca__nome b { font-weight: 700; color: var(--marca-acento); }
.rodape .marca, .rodape .marca__simbolo { color: #0f1438; }
.rodape .marca__nome { color: #f3f6ff; }
.rodape .marca__nome b { color: var(--marca-destaque); }
.rodape .marca__simbolo .marca__fundo { fill: #161c4a; }

/* ---------- foco e contraste ---------- */
:focus-visible { outline-color: var(--marca-acento); }
.anuncio .selo, .plano--destaque::before { color: var(--marca-noite); }

/* ---------- grade da marca (rgba(52,198,244,.07)) ---------- */
.hero--home .hero__fundo,
.hero:not(.hero--home) .hero__fundo,
.chamada,
.resultados,
.rodape {
  background-image:
    linear-gradient(var(--marca-grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--marca-grade) 1px, transparent 1px),
    var(--gradiente-marca);
  /* FOUR layers: the two grid lines + the two layers inside --gradiente-marca. With only three sizes
     the list repeats and the linear gradient tiles at 48px, turning the hero into a quilt. */
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
}
.resultados, .rodape { background-color: var(--marca-noite); }
.rodape {
  background-image:
    linear-gradient(rgba(52, 198, 244, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 198, 244, .05) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------- hero da home: navy-noite com a grade e o brilho azul ---------- */
.hero--home { background: var(--marca-noite); color: #f3f6ff; }
.hero--home .hero__fundo { background-color: var(--marca-noite); }
.hero--home .hero__fundo::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(42% 60% at 78% 34%, rgba(52, 198, 244, .20) 0%, rgba(52, 198, 244, 0) 70%),
    radial-gradient(38% 50% at 8% 100%, rgba(37, 38, 107, .65) 0%, rgba(37, 38, 107, 0) 70%);
  pointer-events: none;
}
.hero--home .hero__fundo::after {
  border-color: rgba(52, 198, 244, .22);
  box-shadow: 0 0 0 90px rgba(52, 198, 244, .035), 0 0 0 180px rgba(52, 198, 244, .02);
}
.hero--home h1 { color: #f3f6ff; }
.hero--home h1 strong {
  color: transparent;
  background: linear-gradient(100deg, #6fd8fb 0%, #34c6f4 45%, #9fe6ff 100%);
  -webkit-background-clip: text; background-clip: text;
}
.hero--home .sobretitulo { color: #b7ecff; }
.hero--home .sobretitulo::before { color: var(--marca-destaque); }
.hero--home .hero__sub { color: rgba(243, 246, 255, .74); }
.hero--home .hero__equipe-resumo { color: rgba(243, 246, 255, .74); }
.hero--home .hero__equipe-resumo strong { color: #f3f6ff; }
.hero--home .rostos img { border-color: var(--marca-noite); }
.hero--home .hero__prova { color: rgba(243, 246, 255, .66); }
.hero--home .hero__prova span::before { background: var(--marca-destaque); box-shadow: 0 0 0 3px rgba(52, 198, 244, .18); }
.hero--home .btn--primario {
  background: var(--marca-destaque); color: var(--marca-noite);
  box-shadow: 0 10px 30px rgba(52, 198, 244, .28);
}
.hero--home .btn--primario:hover { background: var(--marca-destaque-claro); }
.hero--home .btn--contorno { color: #f3f6ff; box-shadow: inset 0 0 0 1.5px rgba(243, 246, 255, .45); background: rgba(255, 255, 255, .03); }
.hero--home .btn--contorno:hover { box-shadow: inset 0 0 0 1.5px var(--marca-destaque); }
.hero--home .cartao-hero, .hero--home .equipe-lateral a, .hero--home .palco-equipe__lateral > a {
  box-shadow: var(--brilho);
}
.hero--home .palco-equipe__lateral > a.equipe-lateral__mais,
.hero--home .equipe-lateral__mais { color: #b7ecff; background: transparent; box-shadow: none; border-color: transparent; }
.hero--home .cartao-hero .link-seta { color: var(--marca-acento); }
.hero--home .abas-hero button { background: rgba(255, 255, 255, .06); color: #e6ecff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.hero--home .abas-hero button[aria-selected="true"], .hero--home .abas-hero button.ativo {
  background: var(--marca-destaque); color: var(--marca-noite); box-shadow: none;
}

/* ---------- heros de setor: o mesmo destaque azul da home ---------- */
.hero:not(.hero--home) h1 strong {
  color: transparent;
  background: linear-gradient(100deg, #6fd8fb 0%, #34c6f4 45%, #9fe6ff 100%);
  -webkit-background-clip: text; background-clip: text;
}
.hero:not(.hero--home) .sobretitulo { color: #b7ecff; }
.hero:not(.hero--home) .sobretitulo::before { color: var(--marca-destaque); }

/* ---------- faixas escuras herdadas: destaque azul legivel ---------- */
.chamada h2 strong, .resultados h2 strong { color: var(--marca-destaque-claro); }
.chamada .btn--claro, .resultados .btn--claro { color: var(--marca-noite); }
.chamada .btn--claro:hover, .resultados .btn--claro:hover { background: #d6efff; }

/* ---------- botoes no claro ---------- */
.btn--primario:hover { background: #1b1c52; }
.btn--contorno { box-shadow: inset 0 0 0 1.5px rgba(37, 38, 107, .35); }
.btn--contorno:hover { box-shadow: inset 0 0 0 1.5px var(--marca-primaria); }

/* ---------- atendimento sem canal configurado ---------- */
.form--aguardando { display: grid; gap: 18px; align-content: start; }
.form--aguardando .lista-check { margin: 0; }
.form--aguardando .btn { justify-self: start; }
.form__ok-acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }

/* ---------- rodape: titulos de coluna (h2 para nao pular nivel; mesmo visual do h4 herdado) ---------- */
.rodape .rodape__titulo { margin: 0 0 14px; color: var(--branco); font-family: var(--fonte); font-size: .95rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4; }

/* ---------- 404 ---------- */
.cabeca-pagina--404 { padding-block: clamp(80px, 12vw, 160px); }
.cabeca-pagina--404 .hero__acoes { margin-top: 28px; }