/* Cabeçalho global V220.1.32. Os valores e estados continuam no JavaScript existente. */
body header.hero.hero-ref {
  position:relative;
  isolation:isolate;
  border:1px solid #3689d9!important;
  border-radius:25px!important;
  background:
    radial-gradient(ellipse at 18% 5%,rgba(20,125,230,.25),transparent 39%),
    radial-gradient(ellipse at 77% 120%,rgba(4,75,145,.23),transparent 54%),
    linear-gradient(115deg,#061c38 0%,#071a31 51%,#0b223e 100%)!important;
  box-shadow:inset 0 0 0 3px rgba(57,155,245,.12),inset 0 1px rgba(197,230,255,.25),0 15px 38px rgba(16,59,106,.20)!important;
  overflow:hidden;
  color:#f7fbff;
}
body header.hero.hero-ref::before {
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(99,177,245,.17);
  border-radius:20px;
  pointer-events:none;
}
body header.hero.hero-ref .heroRefWrap {
  display:grid!important;
  grid-template-columns:minmax(0,36%) minmax(0,42%) minmax(260px,22%)!important;
  min-height:168px!important;
  margin:0!important;
  align-items:stretch;
}
body header.hero.hero-ref .heroRefLeft {
  display:grid!important;
  grid-template-columns:100px minmax(0,1fr)!important;
  gap:18px!important;
  padding:25px 24px!important;
  text-align:left!important;
  min-width:0;
}
body header.hero.hero-ref .heroRefLeft::after,
body header.hero.hero-ref .heroRefCenter::after {
  display:block!important;
  top:25px;
  bottom:25px;
  background:rgba(102,173,235,.24);
}
body header.hero.hero-ref .heroRefIcon {
  width:100px!important;
  height:100px!important;
  flex:none;
  border:3px solid #1597ff!important;
  background:radial-gradient(circle at 50% 18%,#105895 0%,#083264 51%,#051831 100%)!important;
  box-shadow:0 0 0 4px rgba(30,158,255,.13),0 0 24px rgba(0,134,255,.62),inset 0 0 13px rgba(41,166,255,.72)!important;
}
body.clean-pro header.hero.hero-ref .heroRefIcon svg {
  display:block;
  width:94%!important;
  height:94%!important;
  stroke:none!important;
}
body header.hero.hero-ref .heroRefIcon svg text {
  stroke:none!important;
  fill:#b8e5ff!important;
  paint-order:normal;
}
body header.hero.hero-ref .heroLogoLetters {
  font:900 52px/1 Arial,sans-serif;
  letter-spacing:-6px;
}
body header.hero.hero-ref .heroLogoCaption {
  font:800 10px/1 Arial,sans-serif;
  letter-spacing:.35px;
}
body header.hero.hero-ref .heroRefKicker {
  color:#68b9fa!important;
  font-size:10px!important;
  letter-spacing:.14em!important;
  line-height:1.35!important;
  margin:0 0 8px!important;
}
body header.hero.hero-ref .heroRefTitle {
  color:#fff!important;
  font-size:clamp(19px,2vw,31px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  margin:0 0 9px!important;
  text-wrap:balance;
}
body header.hero.hero-ref .heroRefSub {
  color:#a9c9e9!important;
  font-size:12px!important;
  line-height:1.4!important;
}
body header.hero.hero-ref .heroRefCenter {
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch;
  min-width:0;
}
body header.hero.hero-ref .heroStat {
  min-width:0!important;
  padding:20px 7px 17px!important;
  gap:5px!important;
  justify-content:center;
}
body header.hero.hero-ref .heroStat:not(:last-child)::after {
  display:block!important;
  top:25px!important;
  bottom:25px!important;
  right:0!important;
  left:auto!important;
  width:1px!important;
  height:auto!important;
  background:rgba(102,173,235,.19);
}
body header.hero.hero-ref .heroStatIcon {
  position:relative;
  width:51px!important;
  height:51px!important;
  border-radius:12px!important;
  color:#39abfb!important;
  border:1px solid #137bd4!important;
  background:linear-gradient(145deg,rgba(2,69,131,.75),rgba(2,23,58,.72))!important;
  box-shadow:inset 0 1px rgba(139,210,255,.14),0 0 17px rgba(7,111,224,.22)!important;
  margin:0 0 6px!important;
}
body header.hero.hero-ref .heroStatIcon.online::after,
body header.hero.hero-ref .heroStat.sync-ok .heroStatIcon::after {
  content:"";
  position:absolute;
  top:-5px;
  right:-5px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#21e5a0;
  box-shadow:0 0 0 2px #073056,0 0 10px #21e5a0;
}
body header.hero.hero-ref .heroStatIcon.warn,
body header.hero.hero-ref .heroStat.sync-running .heroStatIcon {color:#ffca73!important;border-color:#b67f2e!important}
body header.hero.hero-ref .heroStat.sync-error .heroStatIcon {color:#ff8d93!important;border-color:#e45e68!important}
body header.hero.hero-ref .heroStatGlyph,
body header.hero.hero-ref .heroStatGlyph svg {
  display:block;
  width:30px;
  height:30px;
}
body header.hero.hero-ref .heroStatGlyph svg {
  fill:none;
  stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body header.hero.hero-ref .heroStatTitle {
  color:#f6faff!important;
  font-size:12px!important;
  line-height:1.25!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
body header.hero.hero-ref .heroStatSub {
  color:#a9c9e9!important;
  font-size:10px!important;
  line-height:1.25!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
  overflow:visible!important;
  text-overflow:clip!important;
}
body header.hero.hero-ref .heroSyncTopBtns {width:auto!important;margin:1px 0 0!important;padding:0!important}
body header.hero.hero-ref .heroSyncMini {
  min-width:0!important;
  width:auto!important;
  height:22px!important;
  padding:0 9px!important;
  border:1px solid rgba(85,174,248,.5)!important;
  background:rgba(18,83,143,.55)!important;
  box-shadow:none!important;
  color:#e6f5ff!important;
  font-size:10px!important;
  border-radius:8px!important;
}
body header.hero.hero-ref .heroSyncMini:hover {background:#126dc6!important}
body header.hero.hero-ref .heroSyncMini:focus-visible {outline:2px solid #ffce6e;outline-offset:2px}
body header.hero.hero-ref .heroSyncMiniIcon {font-size:11px!important}
body header.hero.hero-ref .heroRefRight {padding:19px!important;min-width:0}
body header.hero.hero-ref .heroTotalCard {
  display:grid!important;
  grid-template-columns:51px minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  gap:12px!important;
  align-items:center!important;
  min-height:125px!important;
  padding:16px!important;
  border:1px solid #e6c967!important;
  border-radius:19px!important;
  background:linear-gradient(130deg,rgba(104,78,30,.28),rgba(12,17,26,.70))!important;
  box-shadow:inset 0 1px rgba(255,242,187,.16),0 0 16px rgba(241,200,89,.12)!important;
}
body header.hero.hero-ref .heroTotalIcon {
  display:grid;
  place-items:center;
  width:51px;
  height:51px;
  border:1px solid #a8822d;
  border-radius:12px;
  color:#f6d575;
  background:rgba(45,34,17,.35);
}
body header.hero.hero-ref .heroTotalIcon svg {width:30px;height:30px;fill:currentColor}
body header.hero.hero-ref .heroTotalContent {min-width:0}
body header.hero.hero-ref .heroTotalLabel {color:#c9d7e9!important;font-size:10px!important;letter-spacing:.12em!important;margin:0 0 7px!important}
body header.hero.hero-ref .heroTotalValue {
  color:#ffe08b!important;
  font-size:clamp(18px,1.9vw,30px)!important;
  line-height:1.1!important;
  white-space:nowrap;
  grid-column:auto!important;
  grid-row:auto!important;
  text-align:left!important;
  font-variant-numeric:tabular-nums;
}
body header.hero.hero-ref .heroTotalDesc {color:#afc6df!important;font-size:10px!important;line-height:1.25;margin:7px 0 0!important}

@media(max-width:1600px) {
  body header.hero.hero-ref .heroRefWrap {grid-template-columns:minmax(0,1fr) minmax(255px,31%)!important}
  body header.hero.hero-ref .heroRefLeft {grid-column:1;grid-row:1;padding-bottom:15px!important}
  body header.hero.hero-ref .heroRefLeft::after {display:none!important}
  body header.hero.hero-ref .heroRefCenter {grid-column:1/-1;grid-row:2;border-top:1px solid rgba(102,173,235,.2);border-bottom:0!important}
  body header.hero.hero-ref .heroRefCenter::after {display:none!important}
  body header.hero.hero-ref .heroStat {padding:12px 8px 16px!important}
  body header.hero.hero-ref .heroRefRight {grid-column:2;grid-row:1;padding:16px!important}
}
@media(max-width:800px) {
  body header.hero.hero-ref .heroRefWrap {grid-template-columns:1fr!important;min-height:0!important}
  body header.hero.hero-ref .heroRefLeft {grid-column:1;grid-row:1;grid-template-columns:70px minmax(0,1fr)!important;gap:13px!important;padding:18px!important}
  body header.hero.hero-ref .heroRefIcon {width:70px!important;height:70px!important}
  body header.hero.hero-ref .heroRefTitle {font-size:clamp(18px,4vw,25px)!important}
  body header.hero.hero-ref .heroRefCenter {grid-column:1;grid-row:2}
  body header.hero.hero-ref .heroRefRight {grid-column:1;grid-row:3;padding:12px 15px 17px!important;border-top:1px solid rgba(102,173,235,.2)}
  body header.hero.hero-ref .heroTotalCard {min-height:75px!important;grid-template-columns:40px minmax(0,1fr)!important}
  body header.hero.hero-ref .heroTotalIcon {width:40px;height:40px}
  body header.hero.hero-ref .heroTotalValue {font-size:21px!important}
}
@media(max-width:600px) {
  body header.hero.hero-ref .heroRefCenter {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body header.hero.hero-ref .heroStat {min-height:96px!important;padding:9px 10px!important}
  body header.hero.hero-ref .heroStat:nth-child(2)::after {display:none!important}
  body header.hero.hero-ref .heroStat:nth-child(-n+2) {border-bottom:1px solid rgba(102,173,235,.2)}
  body header.hero.hero-ref .heroStatIcon {width:38px!important;height:38px!important;margin-bottom:1px!important}
  body header.hero.hero-ref .heroStatGlyph,
  body header.hero.hero-ref .heroStatGlyph svg {width:23px;height:23px}
  body header.hero.hero-ref .heroStatTitle {font-size:11px!important}
  body header.hero.hero-ref .heroStatSub {font-size:9px!important}
  body header.hero.hero-ref .heroRefKicker {font-size:8px!important}
  body header.hero.hero-ref .heroRefSub {font-size:11px!important}
}
