/* Tema da Ritmos, Academia de Artes e Estudo, para a aplicação do estúdio: os tokens --ec-* com a marca do site
   (cinematic-websites/Ritmos das Artes/motion-escuro.html): o papel #FBF8F2 no fundo, o azul-marinho #171E4A nos
   títulos e nos botões, o azul do nome #1877B8 onde é texto de destaque, e os quatro quadrados do logótipo nos traços.
   Unbounded nos títulos, Manrope no corpo e Quicksand no nome "ritmos", como no site. Só o tema claro.
   A marca na barra: os três quadrados à esquerda, "ritmos" em Quicksand e "academia de artes e estudo" por baixo. */

:root {
  --ec-acento: #1877B8;
  --ec-acento-forte: #13649C;
  --ec-escuro: #171E4A;
  --ec-acento-suave: rgba(43, 163, 224, .12);
  --ec-fundo: #FBF8F2;
  --ec-alerta: #C92F6E;
  --ec-tinta: #171E4A;
  --ec-texto: #3C4470;
  --ec-cinza: #6B7191;
  --ec-linha: rgba(23, 30, 74, .12);
  --ec-linha-forte: rgba(23, 30, 74, .26);
  --ec-superficie: #FFFFFF;
  --ec-sobre-acento: #FFFFFF;
  --ec-botao: #171E4A;
  --ec-sobre-botao: #FFFFFF;
  --ec-sombra: rgba(23, 30, 74, .12);
  --ec-brilho: rgba(247, 197, 30, .30);
  --ec-f-titulo: "Unbounded", system-ui, sans-serif;
  --ec-f-corpo: "Manrope", system-ui, sans-serif;
  --ec-f-marca: "Quicksand", system-ui, sans-serif;
  --ec-marca-peso: 700;
  --ec-faixa: #F3EEE4;
  --ec-faixa-texto: #3C4470;
  --ec-veu: rgba(23, 30, 74, .55);
  --ec-toast: #171E4A;
  --ec-verde: #23935A;
  --ec-vermelho: #C92F6E;
  --ec-entrada: radial-gradient(120% 80% at 50% 0%, rgba(43, 163, 224, .14), transparent 60%), #FBF8F2;
  color-scheme: light;
}

/* Os títulos em Unbounded, mais leves do que no filme, para caberem na aplicação; o destaque no azul do nome. */
.cabeca-vista h1 { font-weight: 500; letter-spacing: -.01em; }
.cabeca-vista h1 em { font-style: normal; color: var(--ec-acento); }

/* A marca: os três quadrados à esquerda, o nome em Quicksand e o subtítulo em minúsculas, sem o traço. */
.marca:not(.marca-img) { padding: 0 0 0 46px; min-height: 38px; justify-content: center; background: url("../img/ritmos-marca.svg") left center / 38px auto no-repeat; }
.marca:not(.marca-img) .marca-risco { display: none; }
.marca-nome { font-weight: 700; font-size: 27px; letter-spacing: -.02em; line-height: 1; color: #1877B8; text-transform: lowercase; }
.marca-sub { font-family: var(--ec-f-corpo); font-weight: 600; font-size: 9.5px; letter-spacing: .06em; margin-top: 2px; color: #3C4470; text-transform: lowercase; }
.topo-movel .marca:not(.marca-img) { padding-left: 38px; background-size: 30px auto; }
.topo-movel .marca-nome { font-size: 22px; }
.topo-movel .marca-sub { font-size: 8px; }