/* =========================================================================
   pages/referido.css — Landing de referidos (/r/<codigo>/)
   ========================================================================= */

.referido__container {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 800px) {
  .referido__container { grid-template-columns: 1fr; }
}

.referido__card {
  padding: var(--sp-6);
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: var(--r-lg);
}
.referido__card form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.referido__card input {
  padding: var(--sp-3);
  background: var(--t-bg-alt);
  border: 1px solid var(--t-line);
  border-radius: var(--r-md);
  color: var(--t-text);
  font-size: var(--fs-base);
}

.referido__msg { margin-top: var(--sp-3); font-size: var(--fs-sm); }
.referido__msg.ok { color: var(--t-success); }
.referido__msg.err { color: var(--t-danger); }

.referido__bonus {
  padding: var(--sp-6);
  background: var(--t-bg-alt);
  border: 1px solid var(--t-line);
  border-radius: var(--r-lg);
}
.referido__bonus ul { list-style: none; padding: 0; margin: var(--sp-4) 0; }
.referido__bonus li { padding: var(--sp-2) 0; color: var(--t-text-2); }
.referido__bonus small { color: var(--t-text-3); }