/*
 * Página: modelo geral de marca (page-marca.php). Carregado só nesse modelo (inc/assets.php).
 * Cada marca define as cores em .pagina-marca--{marca}; as seções só usam as variáveis.
 */

/* ==== Cores das marcas ==== */

/* --marca-cor: destaques (nome, botões, números); --marca-cor-2: detalhes (linhas, chamada);
   --titulo-fundo: aba "Fale com nosso time"; --secao-texto, --form-fundo e --form-texto: o bloco
   de contato (css/componentes.css). */
.pagina-marca {
  --marca-cor: var(--cor-azul-rede);
  --marca-cor-2: var(--cor-laranja-rede);
  --marca-texto: var(--cor-branco);
  --secao-fundo: var(--cor-azul-rede);
  --secao-texto: var(--cor-branco);
  --form-fundo: var(--cor-laranja-rede);
  --form-texto: var(--cor-branco);
  --titulo-fundo: var(--marca-cor);
}

.pagina-marca--vitoria-eventos {
  --marca-cor: var(--cor-laranja-rede);
  --marca-cor-2: var(--cor-azul-rede);
  --secao-fundo: #dbdbdb;
  --secao-texto: var(--cor-azul-rede);
  --titulo-fundo: var(--cor-azul-rede);
  --form-fundo: var(--cor-laranja-rede);
  --form-texto: var(--cor-branco);
}

.pagina-marca--rede-ooh {
  --marca-cor: var(--cor-azul-rede);
  --marca-cor-2: var(--cor-laranja-rede);
  --secao-fundo: var(--cor-azul-rede);
  --secao-texto: var(--cor-branco);
  --form-fundo: var(--cor-laranja-rede);
  --form-texto: var(--cor-branco);
  --titulo-fundo: var(--cor-laranja-rede);
}

.pagina-marca--fm-o-dia {
  --marca-cor: var(--cor-azul-fm-o-dia);
  --marca-cor-2: #f3e736;
  --secao-fundo: var(--cor-branco);
  --secao-texto: var(--cor-preto);
  --form-fundo: var(--cor-azul-fm-o-dia);
  --form-texto: var(--cor-branco);
}

/* ==== Sub-navegação ==== */

.sub-navigation--marca .logo-menu img {
  max-height: 60px;
  width: auto;
  max-width: 100%;
}

.sub-navigation--marca .nav-item a:hover {
  color: var(--marca-cor);
}

.sub-navigation--marca .marca-mobile-menu {
  color: var(--marca-cor);
}

/* ==== Quem somos ==== */

.sobre-empresa--marca {
  padding: 60px 0;
}

.sobre-empresa--marca .row {
  background-color: #1d1d1b;
  padding: 0 0 60px;
}

.sobre-empresa--marca .inner-empresa {
  margin: 0 5% 0 8%;
}

.sobre-empresa--marca h1 {
  margin-top: -30px;
}

/* No modelo geral o nome fica no fluxo (sem position: absolute), para não cobrir a chamada. */
.sobre-empresa--marca h1 span {
  position: static;
  display: inline-block;
  background-color: var(--marca-cor);
  color: var(--marca-texto);
}

.sobre-empresa--marca .p-title {
  color: var(--marca-cor-2);
}

.sobre-empresa--marca .inner-empresa p:not(.p-title) {
  font-weight: normal;
  font-size: 1.1rem;
  line-height: 1.7;
}

.sobre-empresa--marca a {
  background-color: var(--marca-cor);
  color: var(--marca-texto);
}

@media (max-width: 991.98px) {
  .sobre-empresa--marca .row {
    padding: 0 20px 40px;
  }

  .sobre-empresa--marca h1 span {
    padding: 1.2rem 2rem;
  }
}

/* ==== Em números ==== */

.numeros-marca {
  padding: 20px 0 80px;
}

.numeros-marca .titulo-secao {
  margin-bottom: 40px;
  background-color: var(--marca-cor);
  color: var(--marca-texto);
}

.numeros-marca .numero {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 20px;
  border-top: 6px solid var(--marca-cor);
  background-color: #f3f3f3;
  font-family: "Gotham";
}

.numeros-marca strong {
  font-size: 2.2rem;
  line-height: 1.1;
  color: var(--marca-cor);
}

.numeros-marca span {
  margin-top: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #1d1d1b;
}

.numeros-marca small {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--cor-cinza-texto);
}

@media (max-width: 991.98px) {
  .numeros-marca .col-12 {
    margin-bottom: 20px;
  }
}

/* ==== Fale com nosso time ==== */

.downloads--marca {
  background-color: var(--secao-fundo);
  position: relative;
  margin-top: 60px;
}

.downloads--marca .titulo-downloads {
  background-color: var(--titulo-fundo);
  color: var(--marca-texto);
}

.contato--marca #nf-field-7-wrap .ninja-forms-field {
  background-color: #1d1d1b;
}