/* Página: marca. Carregado por último, depois de base, layout, components e responsive. */

/* árvore da marca */
.tc0{fill:var(--indigo);}
.tc1{fill:var(--ciano);}
.arvore{width:100%;height:auto;display:block;overflow:visible;}

/* hero conceitual */
.marca-hero{padding:36px 0 84px;}
.marca-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.marca-hero .lead{font-size:1.15rem;color:var(--tinta-2);max-width:44ch;margin:20px 0 0;}
.marca-hero-visual{display:flex;justify-content:center;}
.marca-hero-visual svg{max-width:380px;}

/* significado do nome */
.significado{background:var(--branco);padding:96px 0;}
.significado .texto{max-width:62ch;}
.significado .texto p{color:var(--tinta-2);font-size:1.05rem;line-height:1.75;margin-top:18px;}
.significado .texto p:first-of-type{margin-top:0;font-size:1.15rem;color:var(--tinta);}

/* o símbolo, com callouts */
.simbolo{padding:96px 0;}
.simbolo-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center;}
.simbolo-quadro{position:relative;max-width:440px;margin:0 auto;}
.marca-callouts{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.marca-callouts path{fill:none;stroke:rgba(69,81,158,.55);stroke-width:.22; stroke-linecap:round;stroke-linejoin:round;}
.marca-callouts circle{fill:var(--indigo);opacity:.7;}
.marca-rotulo{position:absolute;white-space:nowrap; font-size:11.5px;font-weight:650;letter-spacing:.11em;text-transform:uppercase; color:var(--indigo);}
.rot-esq{transform:translate(-100%,-50%);padding-right:10px;}
.rot-cima{transform:translate(-50%,-100%);padding-bottom:8px;}
.rot-dir{transform:translate(0,-50%);padding-left:10px;}
.simbolo-copy h3{margin-top:26px;}
.simbolo-copy h3:first-of-type{margin-top:0;}
.simbolo-copy p{color:var(--tinta-2);font-size:15.5px;margin-top:10px;max-width:52ch;}

/* pilares */
.pilares{background:var(--branco);padding:96px 0;}
.pilares-lista{max-width:720px;border-left:1px solid var(--linha);margin-left:9px;}
.pilar{position:relative;padding:0 0 40px 38px;}
.pilar:last-child{padding-bottom:0;}
.pilar::before{content:"";position:absolute;left:-9px;top:6px; width:17px;height:17px;background:var(--ciano); border-radius:70% 70% 70% 4px;border:3px solid var(--branco);}
.pilar h3{font-size:1.15rem;}
.pilar p{font-size:15px;color:var(--tinta-2);margin-top:8px;max-width:54ch;}

/* evolução */
.evolucao{padding:96px 0;}
.evolucao-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;}
.evolucao-copy p{color:var(--tinta-2);margin-top:16px;max-width:54ch;}
.evolucao-foto{height:380px;border-radius:var(--folha-g);overflow:hidden;}
.evolucao-foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* fechamento */
.fecho{background:var(--nevoa);padding:104px 0;text-align:center;}
.fecho svg{max-width:230px;margin:0 auto;}
.fecho h2{max-width:24ch;margin:34px auto 0;}
.fecho p{color:var(--tinta-2);max-width:46ch;margin:14px auto 0;}
.fecho .canais{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

@media (max-width:920px){
  .marca-hero-grid,.simbolo-grid,.evolucao-grid{grid-template-columns:1fr;}
  .marca-hero{padding:24px 0 64px;}
  .marca-hero-visual{margin-top:36px;}
  .marca-hero-visual svg{max-width:300px;}
  .simbolo-grid{gap:52px;}
  .evolucao-foto{height:320px;}
  .marca-rotulo{font-size:9.5px;letter-spacing:.08em;}
  .rot-dir{white-space:normal;max-width:84px;line-height:1.45;text-align:left;}
  .rot-esq{white-space:normal;max-width:80px;line-height:1.45;text-align:right;}
}

@media (max-width:560px){
  .pilar{padding-left:30px;}
}
