.est-brasao { line-height: 1; }








.est-brasao .ptn {
  
  font-size: var(--ptn-tam, 40px);

  

  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
  
  flex: none;
  position: relative;
  isolation: isolate;
}

.est-brasao .ptn > *,
.est-brasao .ptn::before,
.est-brasao .ptn::after { grid-area: 1 / 1; }












.est-brasao .ptn {
  --m-borda-alto: #d08f57;
  --m-borda-meio: #a4653a;
  --m-borda-baixo: #6b3b20;
  --m-campo-alto: #4a2a19;
  --m-campo-baixo: #2c1810;
  --m-glifo: #f0b98a;
  --m-luz: rgba(255, 214, 176, .55);
  --m-pip: #e6a771;
  --m-sombra: rgba(0, 0, 0, .55);
}



















































.est-brasao .ptn[data-patamar="podre"] {
  --hex: polygon(50% 0%, 100% 25%, 100% 52%, 78% 62%, 96% 71%, 50% 100%,
                 0% 75%, 11% 46%, 0% 25%);
  --m-borda-alto: #5e4e3b;
  --m-borda-meio: #3f3427;
  --m-borda-baixo: #241d16;
  --m-campo-alto: #3a2e21;
  --m-campo-baixo: #201810;
  --m-glifo: #c9bda3;
  --m-luz: rgba(255, 240, 210, .10);
  --m-sombra: rgba(0, 0, 0, .6);
}



.est-brasao .ptn[data-patamar="remendo"] {
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 34%, 8% 27%);
  --m-borda-alto: #8a6b48;
  --m-borda-meio: #614732;
  --m-borda-baixo: #3a2a1c;
  --m-campo-alto: #46331f;
  --m-campo-baixo: #281c11;
  --m-glifo: #e0cba4;
  --m-luz: rgba(255, 236, 200, .16);
  --m-sombra: rgba(0, 0, 0, .58);
}




.est-brasao .ptn[data-patamar="lata"] {
  --hex: polygon(50% 3%, 100% 25%, 96% 73%, 50% 100%, 4% 77%, 0% 26%);
  --m-borda-alto: #9a9791;
  --m-borda-meio: #6f6c67;
  --m-borda-baixo: #46443f;
  --m-campo-alto: #3a3835;
  --m-campo-baixo: #21201e;
  --m-glifo: #e4e0d8;
  --m-luz: rgba(255, 255, 255, .18);
  --m-sombra: rgba(0, 0, 0, .55);
}




.est-brasao .ptn[data-patamar="ferrugem"] {
  --m-borda-alto: #b0663a;
  --m-borda-meio: #7d4526;
  --m-borda-baixo: #4a2917;
  --m-campo-alto: #3d2a1e;
  --m-campo-baixo: #241812;
  --m-glifo: #f0d2b0;
  --m-luz: rgba(255, 220, 190, .22);
  --m-sombra: rgba(0, 0, 0, .58);
}




.est-brasao .ptn[data-patamar="ferro"] {
  --m-borda-alto: #8e8b86;
  --m-borda-meio: #5f5c58;
  --m-borda-baixo: #383633;
  --m-campo-alto: #2b2a28;
  --m-campo-baixo: #171615;
  --m-glifo: #dedbd5;
  --m-luz: rgba(255, 255, 255, .34);
  --m-sombra: rgba(0, 0, 0, .6);
  --m-pip: #cfccc6;
}




.est-brasao .ptn[data-patamar="bronze"] {
  --m-borda-alto: #cf9a5a;
  --m-borda-meio: #9c6c34;
  --m-borda-baixo: #5e3f1c;
  --m-campo-alto: #40301c;
  --m-campo-baixo: #241a0f;
  --m-glifo: #f8dcae;
  --m-luz: rgba(255, 226, 180, .5);
  --m-sombra: rgba(0, 0, 0, .55);
  --m-pip: #e0b06a;
}











.est-brasao .ptn[data-patamar="podre"] .ptn-placa,
.est-brasao .ptn[data-patamar="remendo"] .ptn-placa {
  background:
    


    linear-gradient(96deg, transparent 0 41%, rgba(0, 0, 0, .72) 41% 43.4%,
      transparent 43.4%),
    
    radial-gradient(ellipse 20% 11% at 68% 28%, rgba(0, 0, 0, .68), transparent 68%),
    radial-gradient(ellipse 14% 8% at 27% 74%, rgba(0, 0, 0, .6), transparent 68%),
    



    repeating-linear-gradient(93deg,
      rgba(255, 240, 214, .10) 0 .018em,
      rgba(0, 0, 0, .30) .018em .062em),
    linear-gradient(180deg,
      var(--m-borda-alto) 0%, var(--m-borda-meio) 46%, var(--m-borda-baixo) 100%);
}




.est-brasao .ptn[data-patamar="podre"] .ptn-placa::before {
  background:
    radial-gradient(ellipse 40% 26% at 22% 26%, rgba(96, 112, 74, .5), transparent 72%),
    radial-gradient(ellipse 30% 20% at 78% 76%, rgba(78, 92, 66, .42), transparent 72%),
    linear-gradient(180deg, var(--m-campo-alto), var(--m-campo-baixo));
}



.est-brasao .ptn[data-patamar="lata"] .ptn-placa {
  background:
    radial-gradient(ellipse 40% 26% at 24% 22%, rgba(255, 255, 255, .22), transparent 72%),
    radial-gradient(ellipse 34% 24% at 78% 66%, rgba(0, 0, 0, .5), transparent 72%),
    radial-gradient(ellipse 26% 15% at 62% 16%, rgba(0, 0, 0, .42), transparent 72%),
    radial-gradient(ellipse 20% 30% at 8% 62%, rgba(0, 0, 0, .38), transparent 72%),
    radial-gradient(ellipse 22% 14% at 44% 92%, rgba(255, 255, 255, .14), transparent 72%),
    linear-gradient(180deg,
      var(--m-borda-alto) 0%, var(--m-borda-meio) 46%, var(--m-borda-baixo) 100%);
}



.est-brasao .ptn[data-patamar="ferrugem"] .ptn-placa {
  background:
    radial-gradient(ellipse 34% 22% at 18% 34%, rgba(58, 30, 14, .62), transparent 70%),
    radial-gradient(ellipse 26% 30% at 84% 58%, rgba(52, 26, 12, .55), transparent 70%),
    radial-gradient(ellipse 18% 12% at 52% 88%, rgba(40, 20, 10, .5), transparent 70%),
    radial-gradient(ellipse 12% 9% at 36% 20%, rgba(30, 14, 6, .55), transparent 66%),
    radial-gradient(ellipse 15% 10% at 70% 26%, rgba(70, 40, 18, .45), transparent 66%),
    



    linear-gradient(180deg,
      var(--m-borda-alto) 0%, var(--m-borda-meio) 46%, var(--m-borda-baixo) 100%);
}




.est-brasao .ptn[data-patamar="podre"] .ptn-placa::after,
.est-brasao .ptn[data-patamar="remendo"] .ptn-placa::after,
.est-brasao .ptn[data-patamar="lata"] .ptn-placa::after,
.est-brasao .ptn[data-patamar="ferrugem"] .ptn-placa::after { background: none; }



.est-brasao .ptn[data-patamar="podre"] .ptn-glifo,
.est-brasao .ptn[data-patamar="remendo"] .ptn-glifo {
  filter: drop-shadow(0 .012em 0 rgba(0, 0, 0, .55));
  opacity: .92;
}




.est-brasao .ptn[data-patamar="aco"] {
  --m-borda-alto: #dfe6ee;
  --m-borda-meio: #98a1ac;
  --m-borda-baixo: #59616b;
  --m-campo-alto: #2e3238;
  --m-campo-baixo: #191b1f;
  --m-glifo: #e8eef5;
  --m-luz: rgba(255, 255, 255, .6);
  --m-pip: #cfd8e2;
  --m-sombra: rgba(0, 0, 0, .6);
  --m-filete: #b9c3ce;
  


  --m-filete-medio: #666b71;
  --m-filete-baixo: #34373a;
}




.est-brasao .ptn[data-patamar="ouro"] {
  --m-borda-alto: #f7d979;
  --m-borda-meio: #c9a03a;
  --m-borda-baixo: #7d5a12;
  --m-campo-alto: #4b370c;
  --m-campo-baixo: #2b1f05;
  --m-glifo: #ffe08a;
  --m-luz: rgba(255, 236, 170, .62);
  --m-pip: #f4cd6a;
  --m-sombra: rgba(0, 0, 0, .6);
  --m-filete: #d8ae46;
  


  --m-filete-medio: #776026;
  --m-filete-baixo: #3c3114;
  --m-louro: #e0bb55;
}









.est-brasao .ptn[data-patamar="obsidiana"] {
  --m-borda-alto: #6e6b66;
  --m-borda-meio: #33322f;
  --m-borda-baixo: #131314;
  --m-campo-alto: #191818;
  --m-campo-baixo: #08080a;
  --m-glifo: #f4e3bd;
  --m-luz: rgba(246, 234, 205, .55);
  --m-pip: #e8d6ac;
  --m-sombra: rgba(0, 0, 0, .75);
  --m-filete: #d8d1c0;
  


  --m-filete-medio: #77736a;
  --m-filete-baixo: #3c3b36;
  --m-louro: #cfc4a6;
}









.est-brasao .ptn-placa {
  






  font-size: 1em;
  position: relative;
  
















  z-index: 2;
  display: grid;
  place-items: center;
  width: .78em;
  height: .9em;
  clip-path: var(--hex);
  color: var(--m-glifo);

  


  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .05) 0 .008em,
      rgba(0, 0, 0, .05) .008em .022em),
    linear-gradient(180deg,
      var(--m-borda-alto) 0%,
      var(--m-borda-meio) 46%,
      var(--m-borda-baixo) 100%);

  filter: drop-shadow(0 .022em .028em var(--m-sombra));
}




.est-brasao .ptn-placa::before {
  content: "";
  position: absolute;
  inset: .08em .072em;
  clip-path: var(--hex);
  background: linear-gradient(180deg, var(--m-campo-alto), var(--m-campo-baixo));
  box-shadow:
    inset 0 .035em .05em rgba(0, 0, 0, .85),
    inset 0 -.02em .03em var(--m-luz);
  z-index: 0;
}












.est-brasao .ptn-placa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg,
    rgba(255, 255, 255, .18) 0 16%,
    rgba(255, 255, 255, .05) 30%,
    transparent 42%);
  pointer-events: none;
  z-index: 1;
}











.est-brasao .ptn-glifo {
  position: relative;
  z-index: 2;
  display: block;
  width: .42em;
  height: .42em;
  
  transform: translateY(-.045em);
  fill: currentColor;
  filter:
    drop-shadow(0 -.014em 0 rgba(0, 0, 0, .8))
    drop-shadow(0 .014em 0 var(--m-luz));
}
.est-brasao .ptn-glifo path,
.est-brasao .ptn-glifo circle { fill: currentColor; }









.est-brasao .ptn-pips {
  font-size: 1em;
  position: absolute;
  left: 0;
  right: 0;
  bottom: .13em;
  height: .15em;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: .033em;

  background: linear-gradient(180deg, var(--m-borda-alto), var(--m-borda-baixo));
  box-shadow:
    inset 0 .012em 0 var(--m-luz),
    inset 0 -.012em .022em rgba(0, 0, 0, .6),
    0 -.008em .014em rgba(0, 0, 0, .45);
}




.est-brasao .ptn-pips i {
  width: .085em;
  height: .085em;
  transform: rotate(45deg);
  background: linear-gradient(160deg, #fff6, transparent 60%), var(--m-pip);
  box-shadow:
    inset 0 .008em 0 rgba(255, 255, 255, .55),
    0 .008em .012em rgba(0, 0, 0, .65);
}



.est-brasao .ptn[data-grau="5"] .ptn-pips { gap: .028em; }
.est-brasao .ptn[data-grau="5"] .ptn-pips i { width: .076em; height: .076em; }


















.est-brasao .ptn[data-patamar="aco"]::after,
.est-brasao .ptn[data-patamar="ouro"]::after,
.est-brasao .ptn[data-patamar="obsidiana"]::after {
  content: "";
  width: .855em;
  height: .985em;
  clip-path: var(--hex);
  background: linear-gradient(180deg,
    var(--m-filete) 0%,
    var(--m-filete-medio) 62%,
    var(--m-filete-baixo) 100%);
  z-index: 0;
}





.est-brasao .ptn[data-patamar="obsidiana"]::after {
  width: .875em;
  height: 1em;
}


















.est-brasao .ptn[data-patamar="ouro"]::before,
.est-brasao .ptn[data-patamar="obsidiana"]::before {
  content: "";
  width: 1em;
  height: .985em;
  border-style: solid;
  border-width: .05em .05em .085em;
  
  border-color: transparent var(--m-louro) var(--m-louro);
  border-radius: 50%;
  filter: drop-shadow(0 .012em .012em rgba(0, 0, 0, .6));
  z-index: 0;
}



.est-brasao .ptn[data-patamar="obsidiana"]::before {
  border-width: .058em .058em .095em;
}




.est-brasao .ptn[data-patamar="obsidiana"] .ptn-placa {
  filter:
    drop-shadow(0 .022em .028em var(--m-sombra))
    drop-shadow(0 0 .085em rgba(232, 214, 172, .34));
}
.est-brasao .ptn[data-patamar="obsidiana"] .ptn-pips i {
  box-shadow:
    inset 0 .008em 0 rgba(255, 255, 255, .6),
    0 .008em .012em rgba(0, 0, 0, .8),
    0 0 .03em rgba(232, 214, 172, .5);
}






.est-brasao .ptn[data-degrau="2500"]::before {
  border-right-color: #f0e6cd;
  border-bottom-color: #f0e6cd;
  border-left-color: #f0e6cd;
}
.est-brasao .ptn[data-degrau="2500"] .ptn-placa {
  filter:
    drop-shadow(0 .022em .028em var(--m-sombra))
    drop-shadow(0 0 .12em rgba(244, 227, 189, .45));
}








.est-brasao .ptn[data-patamar="obsidiana"] .ptn-placa::after {
  background-image:
    linear-gradient(150deg,
      rgba(255, 255, 255, .16) 0 16%,
      rgba(255, 255, 255, .04) 30%,
      transparent 42%),
    linear-gradient(105deg,
      transparent 42%,
      rgba(255, 248, 228, .45) 50%,
      transparent 58%);
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, 150% 0;
  animation: ptLaminaBrasao 7.5s linear infinite;
}






@keyframes ptLaminaBrasao {
  0%, 73% { background-position: 0 0, 150% 0; }
  100%    { background-position: 0 0, -55% 0; }
}



@media (prefers-reduced-motion: reduce) {
  .est-brasao .ptn[data-patamar="obsidiana"] .ptn-placa::after {
    animation: none;
    background-position: 0 0, 150% 0;
  }
}