.ponte-notice {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  margin:0 auto;
  max-width: 440px;
  width: auto;
  z-index: 800;
  display: flex;
  align-items: flex-start;
  gap:1rem;
  background: #0f1619;
  color: #e8f2f9;
  border-radius:16.2px;
  padding:1.1rem 1.2rem;
  box-shadow: 0 18px 40px -18px rgba(15, 22, 25, 0.65);
  border: 1px solid rgba(232, 242, 249, 0.12);
}

.ponte-notice[hidden] { display: none; }


.ponte-notice__chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  width: 64px;
  height: 30px;
  border-radius:899.1px;
  background: linear-gradient(to right, #4c5565 0%, #4c5565 48%, #2565c8 52%, #5bdc52 100%);
  position: relative;
  padding:0 4.4px;
  margin-top:0.1rem;
}
.ponte-notice__chip-side {
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: 50%;
  text-align: center;
  color: rgba(232, 242, 249, 0.85);
  z-index: 1;
}
.ponte-notice__chip-side--new { color: #0f1619; }
.ponte-notice__chip-knob {
  position: absolute;
  top: 3px;
  left: 20px;
  width: 24px;
  height: 24px;
  border-radius:50%;
  background: #e8f2f9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.ponte-notice__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ponte-notice__text {
  margin:0 0 0.8rem 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(232, 242, 249, 0.88);
}
.ponte-notice__text strong { color: #e8f2f9; }
.ponte-notice__text a { color: #5bdc52; text-decoration: underline; font-weight: 700; }

.ponte-notice__dismiss {
  display: inline-block;
  background: #5bdc52;
  color: #0f1619;
  border: none;
  border-radius:899.1px;
  padding:0.6rem 1.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ponte-notice__dismiss:hover { background: #49c540; transform: translateY(-1px); }
.ponte-notice__dismiss:active { transform: translateY(0); }

@media (max-width: 480px) {
  .ponte-notice {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    max-width: none;
    padding:1rem;
    flex-direction: column;
  }
  .ponte-notice__chip { margin-bottom:0.2rem; }
}

@media (min-width: 481px) and (max-width: 900px) {
  .ponte-notice { max-width: 380px; }
}