/* ============================================================
   PAGOS — "Métodos de pago desde el celular".
   Anatomy unlike siblings: a hairline payments directory (run-in
   bold rails — NO numerals, NO bordered panel, so distinct from
   the vivo feed and the deportes ledger), then running retiros
   prose, then a top-flagged "Importante" note (top ember rule,
   not the left rule used by aparte / note-inline).
   Run-in bold lead-ins keep PDF casing and the em-dash verbatim.
   ============================================================ */

.pagos {
  border-top: 1px solid var(--rule);
  padding-block: var(--rhythm);
}
.pagos__head { max-width: 46ch; }
.pagos__head h2 { margin-top: 1rem; }
.pagos__head .standfirst { margin-top: 1rem; }

/* payments directory — hairline-separated run-in rails */
.rails {
  margin-top: clamp(30px, 3.8vw, 54px);
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  max-width: 72ch;
}
.rails__item {
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
.rails__item:first-child { border-top: 0; }
.rails__item b {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ember);
}

/* retiros — running prose */
.pagos__retiros {
  margin: clamp(26px, 3.2vw, 44px) 0 0;
  max-width: 64ch;
  color: var(--ink-soft);
}

/* Importante — top-flagged caution note */
.importante {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 64ch;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.8rem);
  background: var(--night-2);
  border-top: 2px solid var(--ember);
}
.importante p { margin: 0; color: var(--ink-soft); }
.importante b {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ember);
}

.pagos .ticket { margin-top: 1.8rem; }

/* ===== mobile ===== */
@media (max-width: 880px) {
  .pagos__head,
  .rails,
  .rails__item,
  .pagos__retiros,
  .importante { max-width: none; }
}
@media (max-width: 520px) {
  .pagos .ticket { width: 100%; justify-content: center; }
}