/*
  A marca da DAGAI (identidade-visual.pdf, Mariana Design, 2022) sobre o site — só na v2.

  Paleta da marca:  #0E3551 azul-marinho · #31596D azul-petróleo · #BF7633 laranja · #8C4D18 laranja-escuro.
  Ela diz "modernidade e sofisticação", "tons de azul e laranja", tipografia "mais moderna e com uma
  pegada mais jovem" — e o símbolo é um hexágono.

  O que NÃO dá para fazer com o laranja da marca: usá-lo como cor de texto ou fundo de botão com letra
  branca. #BF7633 sobre branco tem contraste de 3,59:1 (o mínimo para texto é 4,5:1). Então:
    --bronze   #9B5920  o laranja escurecido — texto, links, botão (5,46:1 sobre branco, 5,03:1 sobre o cinza)
    --laranja  #BF7633  o laranja da marca — só o que não é texto: filetes, marcas, detalhes, e sobre o marinho
*/

:root{
  --ink:#0E3551;
  --ink-2:#31596D;
  --ground:#F3F6F8;
  --ground-2:#E4EBEF;
  --linha:#D8E0E5;
  --linha-forte:#B2C0C9;
  --bronze:#9B5920;
  --bronze-hover:#7E4816;
  --bronze-claro:#F6E9DA;
  --laranja:#BF7633;
  --petroleo:#31596D;
  --inverso:#0E3551;
  --inverso-tinta:#EEF2F5;
  --inverso-suave:#A9BFCC;
  --inverso-linha:#2A5673;
  --ink-invertido:#A9BFCC;
  --display:"Montserrat","Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#0B1B2A;
    --ground:#08131E;
    --ground-2:#12293D;
    --ink:#E7EDF1;
    --ink-2:#A3B8C4;
    --linha:#1E3A52;
    --linha-forte:#31596D;
    --bronze:#D79A55;
    --bronze-hover:#E4AC6D;
    --bronze-claro:#2E2418;
    --laranja:#D79A55;
    --petroleo:#8FC1DA;
    --inverso:#12293D;
    --inverso-tinta:#E7EDF1;
    --inverso-suave:#A3B8C4;
    --inverso-linha:#2A5673;
    --ink-invertido:#A3B8C4;
  }
}

/* a fonte geométrica é mais larga que a serifada: título um pouco menor e mais junto */
h1,h2,h3{letter-spacing:-.02em}
.hero h1{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.12;font-weight:700}
h2{font-size:clamp(1.45rem,3.3vw,2rem);font-weight:600}
.dores h3{font-weight:600;font-size:1.1rem}
.prova-numeros .valor,.numeros .valor{font-weight:600}

/* o laranja da marca nos detalhes que não são texto */
.razoes h3,.gestao-itens div{border-left-color:var(--laranja)}
.fechamento .ve li::before{background:var(--laranja)}
.hero .moldura .m-marca{fill:var(--inverso-tinta)}

/* o logo: o símbolo em laranja e o nome na cor do texto — como na identidade visual */
.marca{display:inline-flex;align-items:center;gap:10px;line-height:1}
.marca .simbolo{height:40px;width:40px;color:var(--laranja)}
.marca .nome{height:22px;width:auto;color:var(--ink)}

/* o padrão de hexágonos da marca, bem discreto, no fecho */
.fechamento{position:relative;overflow:hidden;isolation:isolate}
.fechamento::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url(/assets/padrao.svg) right center/640px;
  opacity:.18;
  -webkit-mask-image:linear-gradient(90deg,transparent 15%,#000 85%);
          mask-image:linear-gradient(90deg,transparent 15%,#000 85%);
}

/* o selo circular no rodapé */
/* máscara em vez de <svg> inline: o desenho tem 41 KB e ficaria repetido nas 32 páginas; assim ele vem de um
   arquivo em cache e continua herdando a cor do tema */
.rodape-selo{
  margin-top:34px;height:84px;width:84px;
  background:var(--ink-2);opacity:.75;
  -webkit-mask:url(/assets/selo.svg) center/contain no-repeat;
          mask:url(/assets/selo.svg) center/contain no-repeat;
}

/* a capa da página Sobre: o hexágono da marca, grande e claro, atrás do título, à direita */
.capa-com-marca{position:relative}
.capa-com-marca > *:not(.capa-simbolo){position:relative;z-index:1}
.capa-simbolo{
  position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  width:min(280px,34vw);height:auto;color:var(--laranja);opacity:.16;pointer-events:none;
}
@media (max-width:700px){ .capa-simbolo{width:220px;right:-60px} }

/* o hero sem imagem: uma coluna, e o hexágono da marca de marca-d'água à direita */
.hero .largura.hero-marca{grid-template-columns:1fr}
.hero-marca > div{max-width:46rem}
.hero-marca .capa-simbolo{width:min(400px,38vw);right:-20px}
@media (max-width:700px){ .hero-marca .capa-simbolo{width:240px;right:-70px} }

/* a marca-d'água sangra para fora da coluna de propósito; a seção corta o excesso para a página não rolar de lado */
.hero,.capa{overflow:hidden}

/* a prova sem depoimento: só a faixa de números, centralizada */
.prova-numeros-só{max-width:44rem;margin:0 auto}