/* Tema da Terminal, Krav Maga Bracarense, para a aplicação do estúdio: os tokens --ec-* com a marca do site
   (sites/_exemplo-krav-maga-braga-terminal-motion/css/style.css): o papel #F3F1EC no fundo, a tinta #121212 nos
   títulos, o vermelho da Maguen #D7261E como acento e o verde do tatami nos fundos suaves. Big Shoulders Display nos
   títulos e na marca, Hanken Grotesk no corpo, como no site. Só o tema claro.
   A marca na barra compõe-se como no site: o símbolo da Maguen, TERMINAL e KRAV MAGA BRACARENSE por baixo, sem o traço. */

:root {
  --ec-acento: #D7261E;
  --ec-acento-forte: #AF1D16;
  --ec-escuro: #121212;
  --ec-acento-suave: rgba(215, 38, 30, .08);
  --ec-fundo: #F3F1EC;
  --ec-alerta: #AF1D16;
  --ec-tinta: #121212;
  --ec-texto: #2A2A28;
  --ec-cinza: #5C5E5A;
  --ec-linha: rgba(18, 18, 18, .12);
  --ec-linha-forte: rgba(18, 18, 18, .26);
  --ec-superficie: #FFFFFF;
  --ec-sobre-acento: #FFFFFF;
  --ec-botao: #121212;
  --ec-sobre-botao: #FFFFFF;
  --ec-sombra: rgba(18, 18, 18, .12);
  --ec-brilho: rgba(215, 38, 30, .2);
  --ec-f-titulo: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --ec-f-corpo: "Hanken Grotesk", system-ui, sans-serif;
  --ec-f-marca: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --ec-marca-peso: 800;
  --ec-faixa: #DCE4DE;
  --ec-faixa-texto: #3E4D44;
  --ec-veu: rgba(18, 18, 18, .5);
  --ec-toast: #121212;
  --ec-verde: #2F6B45;
  --ec-vermelho: #AF1D16;
  --ec-entrada: radial-gradient(120% 80% at 50% 0%, rgba(126, 148, 134, .18), transparent 60%), #F3F1EC;
  color-scheme: light;
}

/* Os títulos são em Big Shoulders, uma letra alta e condensada: um pouco maiores e sem itálico falso. */
.cabeca-vista h1 { font-weight: 800; letter-spacing: .01em; }
.cabeca-vista h1 em { font-style: normal; color: var(--ec-acento); }

/* A marca: o símbolo da Maguen à esquerda, o nome em 900 e o subtítulo pequeno, sem o traço. */
.marca:not(.marca-img) { padding: 0 0 0 50px; min-height: 38px; justify-content: center; background: url("../img/maguen-marca.svg") left center / 42px auto no-repeat; }
.marca:not(.marca-img) .marca-risco { display: none; }
.marca-nome { font-weight: 900; font-size: 26px; letter-spacing: .04em; color: var(--ec-tinta); }
.marca-sub { font-family: var(--ec-f-corpo); font-weight: 700; font-size: 9px; letter-spacing: .16em; margin-top: 4px; }
.topo-movel .marca:not(.marca-img) { padding-left: 42px; background-size: 34px auto; }
.topo-movel .marca-nome { font-size: 21px; }
.topo-movel .marca-sub { font-size: 8px; }