/* 1 Reclamante por Dia — reusa as variáveis/paleta de ../styles.css (dark premium). */

.urpd-wrap { max-width: 480px; padding-top: 32px; padding-bottom: 40px; }

.urpd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center;
}

/* capa larga (arte em fundo preto, funde com o card) */
.urpd-cover { position: relative; }
.urpd-cover img { display: block; width: 100%; height: auto; }
/* sombreamento: dissolve as bordas da arte no card (sem recorte reto) */
.urpd-cover::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  /* rgba(23,21,19,*) = var(--surface) transparente */
  background:
    linear-gradient(180deg, var(--surface) 0, rgba(23, 21, 19, 0) 18%, rgba(23, 21, 19, 0) 58%, var(--surface) 100%),
    radial-gradient(130% 100% at 50% 42%, rgba(23, 21, 19, 0) 55%, var(--surface) 125%);
}

/* corpo */
.urpd-body { padding: 0 24px 26px; margin-top: -8px; position: relative; }
.urpd-title {
  margin: 0 0 14px; font-family: var(--font-head);
  font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15;
  color: var(--accent);
}

.urpd-text { margin: 0 0 14px; font-size: 1.02rem; color: var(--text); line-height: 1.6; }
.urpd-hint { margin: 0 0 20px; font-size: .92rem; }

/* CTA reaproveita .btn.btn-primary.btn-block (dourado) do styles.css */
.urpd-card .btn-primary { padding: 14px 18px; font-size: 1rem; }

@media (max-width: 480px) {
  .urpd-wrap { padding-top: 20px; }
  .urpd-body { padding: 0 18px 22px; }
  .urpd-title { font-size: 1.4rem; }
}