/*
 * Base: fontes, variáveis de cor, elementos e utilitários. Carregado em todas as páginas.
 */

/* ==== Fontes ==== */

@font-face {
  font-family: "vag_roundedregular";
  src:
    url("../fonts/vag_rounded_light-webfont.woff2") format("woff2"),
    url("../fonts/vag_rounded_light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src:
    url("../fonts/Gotham-Light.woff2") format("woff2"),
    url("../fonts/Gotham-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src:
    url("../fonts/Gotham-Bold.woff2") format("woff2"),
    url("../fonts/Gotham-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ==== Variáveis ==== */

:root {
  --cor-branco: #ffffff;
  --cor-preto: #000000;
  --cor-quase-preto: #0a0a0a;
  --cor-grafite: #333333;
  --cor-cinza-escuro: #4e4e4d;
  --cor-cinza-medio: #666666;
  --cor-cinza-texto: #6c6d71;
  --cor-cinza-claro: #bfbfbf;
  --cor-cinza-borda: #c2c2c2;
  --cor-azul-rede: #0303b5;
  --cor-laranja-rede: #f93a22;
  --cor-azul-escuro: #13243a;
  --cor-azul-marinho: #0d3267;
  --cor-azul-medio: #295c8b;
  --cor-azul-tv-vitoria: #2b60a8;
  --cor-azul-folha-vitoria: #5382bb;
  --cor-azul-folha-escuro: #244a88;
  --cor-azul-folha-claro: #3c97ba;
  --cor-azul-claro: #0090cb;
  --cor-azul-ciano: #00ccff;
  --cor-vermelho-spark: #ed1e27;
  --cor-rosa-spark: #fe2148;
  --cor-vermelho-jp-fm: #c41b22;
  --cor-vermelho-jovem-pan: #c61d23;
  --cor-vinho-jp-news: #ab2226;
  --cor-vermelho-jp-news: #e51a29;
  --cor-vermelho-pan-news: #c81c21;
  --cor-bege-jp-news: #f8e1b7;
  --cor-verde-limao: #a8cf38;
  --cor-engages: var(--cor-azul-rede);
  --cor-azul-fm-o-dia: #1f86c8;
}

/* ==== Elementos ==== */

* {
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
}

body,
html {
  overflow-x: hidden;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  image-rendering: optimizeQuality;
}

[role="button"] {
  cursor: pointer;
}

/* ==== Ícones ==== */

/* Ícones SVG (inc/icons.php) dentro dos <i class="fa..."> posicionados pelos componentes. */

/* :where() zera a especificidade: regras dos componentes (ex.: .marca-mobile-menu { display: none })
   continuam vencendo, como quando o CSS do Font Awesome vinha antes do CSS do tema. */
:where(.fa, .fas, .far, .fab) {
  display: inline-block;
  font-style: normal;
  line-height: 1;
}

.rv-icon {
  display: inline-block;
  height: 1em;
  width: auto;
  overflow: visible;
  vertical-align: -0.125em;
}

/* ==== Utilitários ==== */

.bold {
  font-weight: bold;
}

@media (max-width: 767.98px) {
  .mx-2 {
    gap: 40px;
  }
}

@media (max-width: 575.98px) {
  .col-xs-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Cores pontuais nos templates (substituem o antigo style=""; por isso !important, que vence
   qualquer seletor como o style="" vencia). */
.rv-texto-cinza {
  color: #57595b !important;
}

.rv-destaque-engages {
  background-color: var(--cor-engages) !important;
  color: var(--cor-branco) !important;
}

.rv-link-preto {
  color: var(--cor-preto) !important;
}