/* ==========================================================================
   Inscrição — dados para pagamento
   ========================================================================== */

/* O bloco ocupa a largura toda da página, abaixo da régua das seções:
   é a informação que o participante (ou o setor financeiro do órgão)
   vai copiar para outro lugar, então precisa ser achado de relance */
.pay {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
  padding-top: clamp(1.4rem, 2.6vw, 2.2rem);
  border-top: 1px solid var(--line);
}

/* Título à esquerda, frase de abertura à direita (vira coluna única no celular) */
.pay__head {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: end;
}
.pay__head h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); max-width: 16ch; }

/* Painel: superfície quente, recortada por uma faixa de brasa no topo e
   um refletor laranja vindo do canto, como o palco do resto do site */
.pay__panel {
  position: relative;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 74, 0, .2), transparent 55%),
    var(--dark);
  border: 1px solid var(--line);
  border-top: 3px solid var(--flame);
}

/* Grade de 12 colunas: banco, agência e conta na primeira linha;
   favorecido (nome longo) e CNPJ na segunda */
.pay__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.pay__item {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: .7rem;
  padding: clamp(1.1rem, 2.2vw, 1.8rem) clamp(1.1rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.pay__item--bank, .pay__item--num { grid-column: span 4; }
.pay__item--name { grid-column: span 8; border-bottom: 0; }
.pay__item--doc  { grid-column: span 4; border-bottom: 0; }
.pay__item--num, .pay__item--doc { border-left: 1px solid var(--line); }

.pay__item dt {
  font-variation-settings: "wdth" 92, "wght" 700;
  font-size: var(--fs-data);
  letter-spacing: .06em;
  color: var(--ember);
}

/* Valor em cima, Copiar embaixo; o botão desce até o pé da célula para
   os botões da mesma linha ficarem alinhados entre si */
.pay__item dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.1rem;
}

/* Algarismos de largura fixa: fácil de conferir dígito a dígito */
.pay__v {
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  user-select: text;
}

/* Agência e conta são os números que mais se digitam: os maiores do bloco */
.pay__item--num .pay__v {
  font-variation-settings: "wdth" 112, "wght" 850;
  font-size: clamp(2.3rem, 4.4vw, 4rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.pay__item--bank .pay__v {
  font-variation-settings: "wdth" 118, "wght" 900;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.pay__item--doc .pay__v {
  font-variation-settings: "wdth" 104, "wght" 800;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.1;
}
.pay__item--name .pay__v {
  max-width: 46ch;
  font-variation-settings: "wdth" 100, "wght" 650;
  font-size: var(--fs-sm);
  line-height: 1.35;
}

/* Botão Copiar: pílula pequena com ícone; alvo de toque de 44px */
.pay__copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  min-width: 7.2rem;
  padding: .55rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--fg);
  font-variation-settings: "wdth" 100, "wght" 750;
  font-size: var(--fs-data);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pay__copy svg {
  width: 1.05rem; height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pay__copy:hover { border-color: var(--flame); color: var(--white); background: rgba(255, 74, 0, .14); }
.pay__copy:active { transform: scale(.97); }
.pay__copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Retorno de "Copiado": dourado, o mesmo martelo de ouro do resto do site */
.pay__copy.is-done { background: var(--gold); border-color: var(--gold); color: #1a1200; }

/* Linhas de apoio abaixo do painel: link oficial e atendimento a órgãos */
.pay__notes {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 1rem clamp(1rem, 4vw, 4rem);
}

@media (max-width: 1024px) {
  .pay__head, .pay__notes { grid-template-columns: 1fr; }
  .pay__head { gap: .8rem; }
  .pay__item--bank { grid-column: span 12; }
  .pay__item--num  { grid-column: span 6; }
  .pay__item--num:nth-child(2) { border-left: 0; }
  .pay__item--name { grid-column: span 12; border-bottom: 1px solid var(--line); }
  .pay__item--doc  { grid-column: span 12; border-left: 0; }
}

/* Celular: um dado por linha; agência e conta com o Copiar ao lado do número */
@media (max-width: 640px) {
  .pay__item--num { grid-column: span 12; border-left: 0; }
  .pay__item--num dd { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
  .pay__item { padding: 1.1rem 1.1rem 1.2rem; gap: .55rem; }
  .pay__item--num .pay__v { font-size: clamp(2.1rem, 10vw, 2.6rem); }
  .pay__copy { min-width: 6.6rem; padding-inline: .85rem; }
}

/* O .ulink é inline-block: sem isto, o ponto final cai sozinho na linha de baixo */
.nobr { white-space: nowrap; }

/* Presencial e online com a mesma largura útil — e, com isso, as fotos 16:10
   com a mesma altura. O recuo antes do filete ficava só no segundo cartão, que
   saía mais estreito (foto do online mais baixa). Agora o espaço fica dos dois
   lados do filete, na mesma medida de antes. Abaixo de 1025px os cartões
   empilham (pages.css / responsive.css). */
@media (min-width: 1025px) {
  .plans { column-gap: 0; }
  .plans > :first-child { padding-right: clamp(2rem, 5vw, 5rem); }
}