/* Gerado a partir da Identidade Visual do painel. Não edite à mão. */
:root{
  --bg:#09090B;
  --surface:#141417;
  --elevated:#222225;
  --raised:#303033;
  --line:rgba(245,246,247,0.09);
  --line-strong:rgba(245,246,247,0.17);

  --brand:#D72A3F;
  --brand-dark:#A81D2E;
  --brand-text:#FFFFFF;

  --text:#F5F6F7;
  --muted:#A0A4AC;
  --dim:rgba(160,164,172,0.72);

  --logo-h-desktop:30px;
  --logo-h-mobile:26px;
}

/* A marca pode ser texto ou imagem; os dois seguem a mesma altura. */
.brand__logo{
  height:var(--logo-h-mobile);
  width:auto;
  max-width:62vw;
  object-fit:contain;
  display:block;
}
@media (min-width:1000px){
  .brand__logo{height:var(--logo-h-desktop);max-width:320px}
}

/* Botão principal segue a cor da marca e o texto escolhido para ele. */
.btn--brand{background:var(--brand);color:var(--brand-text)}
.btn--brand:hover,.btn--brand:active{background:var(--brand-dark)}

/* O banner recebe um véu na cor da marca, para a arte de fundo acompanhar
   a identidade em vez de ficar presa à cor com que foi gerada. */
.hero__media::before{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse 70% 55% at 66% 30%, rgba(215,42,63,0.34), transparent 70%),
    radial-gradient(ellipse 50% 40% at 12% 82%, rgba(215,42,63,0.12), transparent 70%),
    linear-gradient(180deg, transparent 38%, rgba(9,9,11,0.6) 100%);
  pointer-events:none;
}
.hero__media::after{z-index:2}