:root{
  --bg:#000000;
  --panel:#08484c;
  --text:#e9eef5;
  --muted:#9aa3ad;
  --ok:#22c55e;
  --mid:#f59e0b;
  --hot:#ef4444;
  --valor-font-size:180px;
  --daily-font-size:32px;
  --font-family-base:"UnimedSans-Light",system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  --font-family-strong:"UnimedSlab-Bold","UnimedSans-SemiBold",sans-serif;
  --font-family-value:"UnimedSlab-Bold","UnimedSans-SemiBold",sans-serif;
}

@font-face{
  font-family:"UnimedSans-SemiBold";
  src:url("../fonts/UnimedSans-SemiBold.otf") format("opentype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"UnimedSlab-Bold";
  src:url("../fonts/UnimedSlab-Bold.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"UnimedSans-Light";
  src:url("../fonts/UnimedSans-Light.otf") format("opentype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

html,body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-family-base);
}

.wrap{
  min-height:100dvh;
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:24px;
  padding:24px;
}

.panel{
  background:var(--panel);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}

.vu{display:flex;align-items:center;justify-content:center;padding:24px}
canvas{width:100%;height:100%;max-height:82vh;display:block}

.side{
  display:grid;
  grid-template-rows:auto auto 1fr auto auto;
  align-items:center;
  justify-items:center;
  gap:18px;
  padding:28px;
  text-align:center;
  background-color:#00995d;
}

.titulo-topo{
  margin:0;
  font-weight:600;
  letter-spacing:.06em;
  font-size:clamp(50px,4vw,44px);
  font-family:var(--font-family-strong);
}

.valor-wrap{
  width:80%;
  max-width:800px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.valor-inner{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.valor{
  width:100%;
  font-weight:900;
  line-height:1;
  font-size:clamp(52px,var(--valor-font-size,180px),360px);
  letter-spacing:-.02em;
  text-shadow:0 4px 20px rgba(0,0,0,.45);
  word-break:break-word;
  font-family:var(--font-family-value);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}
.unid{
  font-weight:600;
  color:var(--muted);
  margin-top:-4px;
  font-size:clamp(12px,1.6vw,14px);
  font-family:var(--font-family-strong);
}

.campanha-box{
  width:80%;
  max-width:720px;
  min-height:260px;
  background:rgba(0,0,0,.2);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.brand-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  height:120px;
}
.brand-footer img{
  max-width:280px;
  max-height:120px;
  object-fit:contain;
}
.credito{
  font-size:14px;
  color:var(--muted);
}

.daily-message{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at top,rgba(56,189,248,.25) 0%,rgba(2,6,23,.9) 55%,rgba(2,6,23,.95) 100%);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:30;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.daily-message.show{
  opacity:1;
  pointer-events:auto;
}
.daily-message__content{
  max-width:min(640px, 92vw);
  background:linear-gradient(150deg,rgba(15,23,42,.92),rgba(30,64,175,.9));
  color:#f8fafc;
  border-radius:30px;
  padding:42px 40px 36px;
  box-shadow:0 55px 140px rgba(8,47,73,.6);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:22px;
  border:1px solid rgba(56,189,248,.45);
  transform:translateY(24px) scale(.97);
  transition:transform .35s ease, box-shadow .35s ease;
}
.daily-message.show .daily-message__content{
  transform:translateY(0) scale(1);
  box-shadow:0 65px 160px rgba(8,47,73,.65);
}
.daily-message__content::before{
  content:"";
  position:absolute;
  inset:-26px;
  border-radius:36px;
  background:conic-gradient(from 120deg,rgba(94,234,212,.35),rgba(56,189,248,.55),rgba(59,130,246,.25));
  filter:blur(65px);
  z-index:-1;
  opacity:0.75;
}
.daily-message__close{
  position:absolute;
  top:16px;
  right:16px;
  border:none;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(148,163,184,.25);
  color:#f8fafc;
  font-size:24px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.daily-message__close:hover{
  background:rgba(94,234,212,.35);
  transform:rotate(90deg) scale(1.05);
}
.daily-message__title{
  margin:0;
  font-size:26px;
  font-family:var(--font-family-strong);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.daily-message__text{
  margin:0;
  font-size:clamp(22px,var(--daily-font-size,32px),72px);
  line-height:1.35;
  font-family:var(--font-family-base);
  font-weight:500;
  letter-spacing:.01em;
  text-shadow:0 6px 24px rgba(2,6,23,.45);
}
.daily-message__meta{
  font-size:15px;
  color:#bae6fd;
  font-weight:600;
  display:flex;
  justify-content:flex-start;
}
.daily-message__peak{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.daily-message__peak::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 12px rgba(56,189,248,.8);
}

@media (max-width:980px){
  .wrap{grid-template-columns:1fr}
  .valor-wrap{width:90%}
  .campanha-box{width:92%}
}