/* MÉTODOS DE PAGAMENTO — a peça static/includes/pagamentos/metodos.php.
   ------------------------------------------------------------------
   A paleta é a do site, lida do main.css das quatro marcas (são iguais):
   vermelho #d10303, o vivo #f00843 (hover), azul-escuro #1f2835 (títulos),
   ciano #00acc8 (apoio), linhas #e2e6ea, cinza #6b737c, fonte Ubuntu.
   Tudo responsivo: a grelha das famílias cai para uma coluna, a tabela
   vira cartões com o rótulo da coluna, a linha do tempo empilha, a barra
   de saltos rola de lado no telemóvel. */

.rlx-pag{--pg-cor:#d10303;--pg-vivo:#f00843;--pg-escuro:#1f2835;--pg-apoio:#00acc8;
  --pg-linha:#e2e6ea;--pg-cinza:#6b737c;--pg-fundo:#f6f8fa;--pg-ok:#0a8a4a;--pg-aviso:#b7791f;
  --pg-raio:14px;--pg-sombra:0 6px 22px rgba(31,40,53,.07);
  margin:0 auto;font-family:Ubuntu,arial,sans-serif;color:var(--pg-escuro)}
.rlx-pag *{box-sizing:border-box}
.rlx-pag h3{font-family:Ubuntu,arial,sans-serif}

/* ---- a barra de saltos: fica colada abaixo do menu ---- */
.rlx-pag__nav{position:sticky;top:64px;z-index:5;max-width:1120px;margin:-6px auto 24px;padding:8px;
  display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--pg-linha);border-radius:999px}
.rlx-pag__nav::-webkit-scrollbar{display:none}
.rlx-pag__nav a{flex:0 0 auto;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--pg-cinza);
  text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.rlx-pag__nav a:hover{background:var(--pg-fundo);color:var(--pg-escuro)}
.rlx-pag__nav a.on{background:var(--pg-cor);color:#fff}
@media(max-width:640px){.rlx-pag__nav{top:58px;margin-left:-8px;margin-right:-8px;border-radius:0;border-left:0;border-right:0}}

/* ---- «encontrar a sua factura»: três passos numa linha ---- */
.rlx-pag__encontrar{max-width:1120px;margin:0 auto 26px;padding:18px 22px;border:1px solid var(--pg-linha);border-radius:var(--pg-raio);
  background:linear-gradient(180deg,#fff,var(--pg-fundo));display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}
.rlx-pag__encontrar h3{margin:0;font-size:15px;font-weight:700;flex:0 0 auto}
.rlx-pag__encontrar ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;counter-reset:passo}
.rlx-pag__encontrar li{position:relative;padding-left:30px;font-size:14px;color:#3d4753;counter-increment:passo}
.rlx-pag__encontrar li::before{content:counter(passo);position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;
  background:var(--pg-cor);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ---- os blocos de texto ---- */
.rlx-pag__bloco{max-width:1120px;margin:22px auto 0;padding:24px 26px;border:1px solid var(--pg-linha);border-radius:var(--pg-raio);background:#fff;
  scroll-margin-top:120px}
.rlx-pag__bloco h3{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--pg-escuro);letter-spacing:-.01em}
.rlx-pag__bloco>p{margin:0;font-size:15px;line-height:1.65;color:#3d4753}
.rlx-pag__bloco-s{margin:0 0 16px!important;font-size:14px!important;color:var(--pg-cinza)!important}
.rlx-pag__bloco-n{margin:14px 0 0!important;padding:10px 14px;border-radius:10px;background:var(--pg-fundo);font-size:13.5px!important;color:var(--pg-cinza)!important}
.rlx-pag__duas{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rlx-pag__duas .rlx-pag__bloco{margin:22px 0 0}
@media(max-width:820px){.rlx-pag__duas{grid-template-columns:1fr;gap:0}}

/* ---- «qual é o mais rápido?»: tabela no computador, cartões no telemóvel ---- */
.rlx-pag__tab-wrap{margin-bottom:22px}
.rlx-pag__rolo{border:1px solid var(--pg-linha);border-radius:12px;overflow:hidden}
.rlx-pag__tab{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
.rlx-pag__tab th,.rlx-pag__tab td{text-align:left;padding:12px 16px;border-top:1px solid #eef1f4;vertical-align:top;color:#3d4753}
.rlx-pag__tab thead th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--pg-cinza);font-weight:700;background:var(--pg-fundo);border-top:0}
.rlx-pag__tab tbody tr:hover{background:#fcfcfd}
.rlx-pag__tab-m a{font-weight:700;color:var(--pg-escuro);text-decoration:none}
.rlx-pag__tab-m a:hover{color:var(--pg-cor)}
.rlx-pag__tab-c{font-weight:600}
.rlx-pag__tab-c.rapida{color:var(--pg-ok)}
.rlx-pag__tab-c.lenta{color:var(--pg-aviso)}
@media(max-width:720px){
  .rlx-pag__rolo{border:0;border-radius:0;overflow:visible}
  .rlx-pag__tab,.rlx-pag__tab tbody,.rlx-pag__tab tr,.rlx-pag__tab td{display:block;width:100%}
  .rlx-pag__tab thead{display:none}
  .rlx-pag__tab tr{border:1px solid var(--pg-linha);border-radius:12px;margin-bottom:10px;padding:6px 0;background:#fff}
  .rlx-pag__tab td{border:0;padding:6px 14px;display:flex;gap:10px;justify-content:space-between;align-items:baseline}
  .rlx-pag__tab td::before{content:attr(data-l);flex:0 0 38%;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--pg-cinza);font-weight:700}
  .rlx-pag__tab td.rlx-pag__tab-m{padding-top:10px}
  .rlx-pag__tab td.rlx-pag__tab-m::before{content:"";flex:0 0 0}
  .rlx-pag__tab td.rlx-pag__tab-m a{font-size:15px}
}

/* ---- as famílias ---- */
.rlx-pag__grelha{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;max-width:1120px;margin:0 auto;scroll-margin-top:120px}
.rlx-pag__cartao{display:flex;flex-direction:column;padding:26px 26px 20px;border:1px solid var(--pg-linha);border-radius:var(--pg-raio);background:#fff;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.rlx-pag__cartao:hover{border-color:#cfd6dd;box-shadow:var(--pg-sombra);transform:translateY(-2px)}
.rlx-pag__cartao:target{border-color:var(--pg-cor);box-shadow:0 0 0 3px rgba(209,3,3,.14)}
.rlx-pag__cartao h3{margin:0 0 6px;font-size:21px;font-weight:700;line-height:1.25}
.rlx-pag__resumo{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--pg-cinza)}
.rlx-pag__logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rlx-pag__logo{width:86px;height:56px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--pg-linha);border-radius:10px;background:#fff;padding:8px 10px;transition:border-color .15s,box-shadow .15s}
.rlx-pag__logo:hover{border-color:#cfd6dd;box-shadow:0 2px 8px rgba(31,40,53,.06)}
.rlx-pag__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.rlx-pag__logo span{font-size:12px;font-weight:700;color:#3d4753;text-align:center;line-height:1.2}

/* o «como pagar» dobrado; abre por método (a animação está no metodos.php) */
.rlx-pag__como{margin:auto 0 0;padding-top:16px}
.rlx-pag__como summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;border:1px solid rgba(209,3,3,.25);
  font-size:13.5px;font-weight:700;color:var(--pg-cor);user-select:none;transition:background .15s,color .15s,border-color .15s}
.rlx-pag__como summary::-webkit-details-marker{display:none}
.rlx-pag__como summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.rlx-pag__como summary:hover,.rlx-pag__como[open] summary{background:var(--pg-cor);border-color:var(--pg-cor);color:#fff}
.rlx-pag__como[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.rlx-pag__como summary:focus-visible{outline:2px solid var(--pg-vivo);outline-offset:2px}
.rlx-pag__dobra{overflow:hidden}
.rlx-pag__metodo{margin-top:16px;padding-top:14px;border-top:1px solid #eef1f4}
.rlx-pag__metodo h4{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--pg-escuro)}
.rlx-pag__metodo h4 small{font-weight:400;color:var(--pg-cinza);font-size:12.5px;margin-left:6px}
.rlx-pag__passos{margin:0 0 10px;padding:0;list-style:none;counter-reset:passo}
.rlx-pag__passos li{position:relative;padding:0 0 0 32px;margin:0 0 8px;font-size:14px;line-height:1.55;color:#3d4753;counter-increment:passo}
.rlx-pag__passos li::before{content:counter(passo);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:rgba(209,3,3,.08);color:var(--pg-cor);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.rlx-pag__conf{margin:0;font-size:13.5px;line-height:1.55;color:var(--pg-escuro)}
.rlx-pag__conf b{color:var(--pg-ok);font-weight:700}
.rlx-pag__nota{display:block;margin-top:6px;padding:8px 12px;border-left:3px solid var(--pg-apoio);background:var(--pg-fundo);border-radius:0 8px 8px 0;color:var(--pg-cinza)}

/* ---- listas com marca; a de segurança leva um visto verde ---- */
.rlx-pag__lista{margin:0;padding:0;list-style:none}
.rlx-pag__lista li{position:relative;padding:0 0 0 26px;margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#3d4753}
.rlx-pag__lista li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--pg-cor);opacity:.55}
.rlx-pag__lista li b{color:var(--pg-escuro);font-weight:700}
.rlx-pag__lista--ok li{padding-left:30px}
.rlx-pag__lista--ok li::before{width:18px;height:18px;top:3px;opacity:1;background:var(--pg-ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---- «e se ficar por pagar?»: a linha do tempo ---- */
.rlx-pag__linha{margin:8px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rlx-pag__linha li{position:relative;padding:16px 18px 16px 20px;border-left:4px solid var(--pg-linha);background:var(--pg-fundo);border-radius:0 12px 12px 0}
.rlx-pag__linha li:nth-child(1){border-left-color:var(--pg-ok)}
.rlx-pag__linha li:nth-child(2){border-left-color:var(--pg-aviso)}
.rlx-pag__linha li:nth-child(3){border-left-color:var(--pg-cor)}
.rlx-pag__linha b{display:block;margin-bottom:5px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--pg-escuro)}
.rlx-pag__linha span{font-size:14px;line-height:1.6;color:#3d4753}
@media(max-width:820px){.rlx-pag__linha{grid-template-columns:1fr}}

/* ---- empresas: quatro pequenos cartões ---- */
.rlx-pag__emp{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:10px}
.rlx-pag__emp>div{padding:16px 18px;border:1px solid #eef1f4;border-radius:12px;background:var(--pg-fundo)}
.rlx-pag__emp h4{margin:0 0 6px;font-size:14.5px;font-weight:700;color:var(--pg-escuro)}
.rlx-pag__emp p{margin:0;font-size:13.5px;line-height:1.6;color:#3d4753}

/* ---- o fecho: depois de pagar + artigo, e o ticket ---- */
.rlx-pag__rodape{max-width:1120px;margin:26px auto 0}
.rlx-pag__depois{padding:22px 26px;border:1px solid var(--pg-linha);border-radius:var(--pg-raio);background:#fff;margin-bottom:18px}
.rlx-pag__depois h3{margin:0 0 6px;font-size:18px;font-weight:700}
.rlx-pag__depois p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:#3d4753}
.rlx-pag__factura{padding:12px 16px;border-radius:10px;background:var(--pg-fundo);font-size:14px!important;color:var(--pg-cinza)!important}
.rlx-pag__kb{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;font-weight:700;color:var(--pg-cor);text-decoration:none}
.rlx-pag__kb:hover{color:var(--pg-vivo);text-decoration:underline}
.rlx-pag__ajuda{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:22px 26px;border-radius:var(--pg-raio);background:var(--pg-escuro);color:#fff}
.rlx-pag__ajuda h3{margin:0 0 4px;font-size:17px;font-weight:700;color:#fff}
.rlx-pag__ajuda p{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.75)}
.rlx-pag__ajuda .rlx-btn{background:var(--pg-cor);border-color:var(--pg-cor);color:#fff}
.rlx-pag__ajuda .rlx-btn:hover{background:var(--pg-vivo);border-color:var(--pg-vivo)}

.rlx-pag__vazio{max-width:720px;margin:0 auto;padding:26px 28px;border:1px dashed #cfd6dd;border-radius:var(--pg-raio);text-align:center;color:#3d4753}
.rlx-pag__vazio p{margin:0 0 14px;font-size:15px;line-height:1.55}

/* ---- telemóvel ---- */
@media(max-width:640px){
  .rlx-pag__encontrar{padding:14px 16px;gap:8px 14px}
  .rlx-pag__encontrar ol{flex-direction:column;gap:6px}
  .rlx-pag__grelha{grid-template-columns:1fr;gap:14px}
  .rlx-pag__cartao{padding:20px 18px 16px}
  .rlx-pag__cartao h3{font-size:19px}
  .rlx-pag__bloco{padding:18px 16px;margin-top:16px}
  .rlx-pag__bloco h3{font-size:18px}
  .rlx-pag__logo{width:78px;height:52px}
  .rlx-pag__ajuda{padding:18px 16px}
  .rlx-pag__ajuda .rlx-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .rlx-pag__cartao,.rlx-pag__logo,.rlx-pag__como summary,.rlx-pag__como summary::after,.rlx-pag__nav a{transition-duration:.01ms}
  .rlx-pag__cartao:hover{transform:none}
}