/* pagamentos — ported verbatim from servicos-pagamento.html inline <style>.
   Absolute PSD layout over the servicos-pagamento-fundo.webp bg on .page.
   Vars (--font, --gold, --track) come from base.css. */

/* ===== decorative microscopy bg on .page so it aligns 1:1 with the 1800x2926 canvas ===== */
.page{background:#000 url('../../img/servicos-pagamento-fundo.webp') top center / 100% auto no-repeat}
.pay{background:transparent}

/* positioning frame: header chrome renders above; content anchored to (canvasY - 465) header bottom */
.pay{position:relative}
/* spacer reserving the head band so absolute children land on their PSD y */
.pay__spacer{height:132.75rem}   /* footer top 2589 - head 465 = 2124px */

/* --- Serviços sidebar box (canvas l779 t462 r1084 b645 = 305x183) --- */
.pay__sidebar{position:absolute;top:-0.1875rem;left:48.6875rem;width:19.0625rem;background:#278465;border-radius:0 0 0.75rem 0.75rem;padding:2.375rem 2rem 1.4375rem;list-style:none;margin:0}
.pay__sidebar li{font-family:var(--font);font-weight:400;font-size:1.25rem;line-height:1;color:#fff;letter-spacing:0.045em;padding:0.55rem 0}
.pay__sidebar li + li{border-top:1px solid rgba(255,255,255,0.46)}
.pay__sidebar li a{color:inherit}
.pay__sidebar li--active a,.pay__sidebar .pay__sidebar-link--active{color:var(--gold)}

/* --- Section heading "Formas de PAGAMENTO" (canvas l263 t763) --- */
.pay__title{position:absolute;top:18.625rem;left:16.4375rem;margin:0;font-family:var(--font);font-style:italic;font-size:3.90625rem;line-height:1.04;letter-spacing:var(--track);text-transform:uppercase}
.pay__title-a{font-weight:300;color:#fff}
.pay__title-b{display:block;font-weight:500;color:#4EB9AD;padding-left:2.75rem}
/* decorative rules flanking the heading */
.pay__title-line{position:absolute;height:0.375rem;background:#DBEDE9;border:0}
.pay__title-line--top{top:19.875rem;left:0;width:15.625rem}       /* canvas t782 l-115->250 (clipped to 0) */
.pay__title-line--bottom{top:24.375rem;left:47.0625rem;width:65.4375rem}  /* canvas t854 l753->1910 (bleeds off right) */

/* --- Content panel (canvas l80 t1085 r1722 b2424 = 1642x1339) --- */
.pay__panel{position:absolute;top:38.75rem;left:5rem;width:102.625rem;min-height:83.6875rem;background:#329C78;border-radius:0 5rem 5rem 5rem}  /* top-left square per model */

/* --- Explanatory + modalities text (canvas l258 t1307 r1500, block 874px tall) --- */
/* PSD font 33.33px, tracking 10. JPG line baselines measured: intro lh~1.74, body lh~1.42, section gaps ~48px */
.pay__text{position:absolute;top:51.75rem;left:16.125rem;width:78.5rem;margin:0;font-family:var(--font);font-size:2.0625rem;color:#fff;letter-spacing:var(--track)}
.pay__text p{margin:0}                                            /* (0,1,1) — modality rules below match this specificity to win */
.pay__text .pay__lead{font-weight:700;line-height:1.74}           /* intro + "A quitação" — loose leading */
.pay__text .pay__lead + .pay__lead{margin-top:2.375rem}           /* gap intro->quitação (y1424->1540) */
.pay__text .pay__mod-h{font-weight:700;line-height:1.13;margin-top:2.95rem}   /* section header, blank-line gap above */
.pay__text .pay__mod-b{font-weight:300;font-style:italic;line-height:1.42;margin-top:2.55rem}  /* body under header, blank-line gap */

/* --- Info pill (canvas l259 t2359 r1541 b2489 = 1282x130) --- */
.pay__info{position:absolute;top:118.375rem;left:16.1875rem;width:80.125rem;min-height:8.125rem;background:#4FBAAD;border-radius:4rem;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem 2rem}
.pay__info p{margin:0;font-family:var(--font);font-weight:700;font-style:italic;font-size:2.34375rem;line-height:1.15;color:#fff;letter-spacing:var(--track)}

/* ===== Responsive ===== */
@media (max-width:60rem){
  .page{background-position:center top;background-size:cover}
  .pay{padding:2rem 6% 0}
  .pay__spacer{display:none}
  .pay__sidebar{position:static;width:100%;border-radius:0.75rem;margin-bottom:2.5rem}
  .pay__title{position:static;font-size:2.6rem;margin-bottom:1.5rem}
  .pay__title-b{padding-left:1.5rem}
  .pay__title-line{display:none}
  .pay__panel{position:static;width:100%;min-height:0;border-radius:2rem;padding:2.5rem 6%;margin-bottom:2rem}
  .pay__text{position:static;width:100%;font-size:1.35rem}
  .pay__info{position:static;width:100%;margin-bottom:3rem}
  .pay__info p{font-size:1.5rem}
}