.ro {
  position: relative; isolation: isolate; overflow: clip;
  background: #07072a; color: var(--noite-texto);
  padding: clamp(64px, 8vw, 110px) var(--pad-x) 28px;
}
.ro-pincel {
  position: absolute; z-index: -1; left: -4%; right: -4%; top: clamp(18px, 3vw, 40px);
  height: clamp(110px, 16vw, 230px);
  background: var(--malha-funda);
  -webkit-mask: url(../img/pincel-2.png) center / 100% 100% no-repeat;
          mask: url(../img/pincel-2.png) center / 100% 100% no-repeat;
  opacity: .75;
}
.ro-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: end; }
.ro-nome {
  margin: 0; font-family: var(--f-display); font-variation-settings: "opsz" 100; font-weight: 380;
  font-size: clamp(3rem, 7vw, 6.6rem); line-height: .9; letter-spacing: -.01em; color: #fff;
}
.ro-ofic { margin: .7rem 0 0; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--noite-suave); }
.ro-end { font-style: normal; font-size: .95rem; line-height: 1.7; color: var(--noite-suave); }
.ro-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .95rem; }
.ro-links a { color: var(--noite-texto); text-decoration: none; border-bottom: 1px solid rgba(152, 148, 220, .45); padding-bottom: 2px; }
.ro-links a:hover { border-color: #fff; }
.ro-base {
  margin-top: clamp(48px, 6vw, 80px); padding-top: 18px;
  border-top: 1px solid rgba(201, 200, 238, .18);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem;
  font-size: .82rem; color: var(--noite-suave);
}
.ro-base p { margin: 0; }
.ro-selo a { color: #fff; font-weight: 400; text-decoration: underline; text-decoration-color: var(--pervinca); text-underline-offset: 3px; }
.ro-selo a:hover { text-decoration-color: #fff; }
@media (max-width: 899px) {
  .ro { padding-bottom: 96px; }
  .ro-grade { grid-template-columns: 1fr; align-items: start; }
}