/* No celular a faixa rola junto: sticky, cobriria o topo do sucesso e as abas. */
@media (width > 860px) {
  html { scroll-padding-top: var(--s8); }
  .demo-aviso { position:sticky; top:0; z-index:60; }
}

.colunas { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); min-height:100svh; }

.painel-resumo {
  background:var(--folha); border-right:1px solid var(--fio);
  padding: var(--s7) var(--s7) var(--s8);
}
.resumo-topo { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s5); margin-bottom:var(--s8); }

.voltar {
  display:inline-flex; align-items:center; gap:var(--s2); min-height:44px;
  color:var(--tinta); font-size:var(--t-nota); font-weight:600; transition:color .2s;
}
.voltar svg { width:18px; height:18px; flex-shrink:0; }
.voltar:hover { color:var(--sienna); }

.marca { font-family:var(--ff-display); font-weight:700; font-size:var(--t-sub); color:var(--tinta); transition:color .2s; }
.marca:hover { color:var(--sienna); }

.resumo { max-width:26rem; }
.resumo-chamada { font-size:var(--t-nota); color:var(--tinta-2); }
.resumo-nome    { font-family:var(--ff-display); font-weight:700; font-size:var(--t-sub); line-height:var(--lh-titulo); color:var(--tinta); }
.resumo-valor   {
  font-family:var(--ff-display); font-size:var(--t-sec); line-height:var(--lh-justo);
  letter-spacing:-.01em; color:var(--tinta); margin: var(--s4) 0 var(--s2);
}
.resumo-periodo { font-family:var(--ff-texto); font-size:var(--t-nota); color:var(--tinta-2); letter-spacing:0; }

.resumo-itens { border-top:1px solid var(--fio); margin-top:var(--s5); padding-top:var(--s4); }

.resumo-aviso { margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--fio); color:var(--tinta); }
.resumo-aviso .link { display:inline; }

.painel-form { padding: var(--s7) var(--s7) var(--s8); max-width:44rem; }

.sem-js {
  border:1px solid var(--erro); color:var(--erro);
  padding:var(--s3) var(--s4); margin-bottom:var(--s6); font-size:var(--t-nota);
}

.form-bloco { margin-bottom: var(--s7); }
.form-bloco-titulo {
  font-size:var(--t-base); font-weight:600; color:var(--tinta);
  padding-top:var(--s3); border-top:1px solid var(--fio); margin-bottom:var(--s4);
}
.form-bloco:first-of-type .form-bloco-titulo { border-top:0; padding-top:0; }
.form-bloco-nota { margin:calc(var(--s1) - var(--s4)) 0 var(--s4); }

.form-linha { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.form-linha--unica { grid-template-columns:1fr; }
.form-linha + .form-linha { margin-top:var(--s4); }

.campo { display:flex; flex-direction:column; gap:var(--s2); }
.campo label { font-size:var(--t-nota); font-weight:600; color:var(--tinta); }

.campo input {
  min-height:48px; padding:var(--s3) var(--s4); background:var(--folha); border:1px solid var(--traco);
  border-radius:var(--raio); font-family:var(--ff-texto); font-size:var(--t-base); color:var(--tinta);
  transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none;
}
/* opacity:1 anula o padrão do navegador, que derrubaria o contraste (6.49:1). */
.campo input::placeholder { color:var(--tinta-2); opacity:1; }
.campo input:focus-visible {
  outline:2px solid var(--sienna); outline-offset:2px; border-color:var(--sienna);
}
.campo input[aria-invalid="true"]  { border-color:var(--erro); box-shadow:0 0 0 3px color-mix(in srgb, var(--erro) 12%, transparent); }
.campo input[aria-invalid="false"] { border-color:var(--ok); }

.campo-erro { font-size:var(--t-nota); color:var(--erro); }
.campo input:disabled {
  background:transparent; border-style:dashed; color:var(--tinta-2);
  cursor:not-allowed;
}
.campo-nota { margin-top: var(--s3); }

.abas { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-bottom:var(--s5); }
.aba {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s1); padding: var(--s3) var(--s4);
  border:1px solid var(--traco); border-radius:var(--raio); cursor:pointer;
  transition:var(--transition); background:var(--folha); font-family:var(--ff-texto); text-align:left;
}
.aba:hover { border-color:var(--tinta-2); }
.aba[aria-selected="true"] { border-color:var(--sienna); background:var(--sienna-fundo); box-shadow:inset 0 0 0 1px var(--sienna); }
.aba-rotulo { font-size:var(--t-base); font-weight:600; color:var(--tinta); }
.aba-sub    { font-size:var(--t-nota); color:var(--tinta-2); }

.pix-titulo { font-size:var(--t-base); font-weight:600; color:var(--tinta); }
.pix-caixa {
  border:1px dashed var(--traco); border-radius:var(--raio);
  padding:var(--s3) var(--s4); display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-top:var(--s4);
}
.pix-caixa code { font-size:var(--t-nota); line-height:var(--lh-meio); color:var(--tinta-2); word-break:break-all; }
.pix-valor { margin-top: var(--s3); }
.pix-valor strong { color:var(--tinta); }
.btn-copiar {
  background:transparent; color:var(--tinta); border:1px solid var(--traco); border-radius:var(--raio);
  min-height:44px; padding:0 var(--s4);
  font-family:var(--ff-texto); font-size:var(--t-nota); font-weight:600; cursor:pointer; transition:var(--transition); white-space:nowrap; flex-shrink:0;
}
.btn-copiar:hover { border-color:var(--sienna); color:var(--sienna); }

/* aria-disabled, não disabled: disabled tira o foco do botão, e ele cairia no <body>. */
.btn-enviar { width:100%; position:relative; overflow:hidden; }
.btn-enviar[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
.btn-enviar .btn-texto { transition:opacity .2s; }
.btn-enviar .btn-giro {
  display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border:2px solid color-mix(in srgb, var(--folha) 35%, transparent); border-top-color:var(--folha);
  border-radius:50%; animation:girar .7s linear infinite;
}
form[aria-busy="true"] .btn-texto { opacity:0; }
form[aria-busy="true"] .btn-giro  { display:block; }
@keyframes girar { to { transform:translate(-50%,-50%) rotate(360deg); } }

#pago { animation:surgir .4s ease; }
@keyframes surgir { from{opacity:0} to{opacity:1} }

.pago-titulo { display:block; width:max-content; max-width:100%; margin-bottom: var(--s4); }
.pago-titulo:focus-visible { outline-offset:4px; }
.pago-desc  { max-width:52ch; margin-bottom: var(--s6); }
.pago-proximo { color:var(--tinta); max-width:52ch; margin-bottom: var(--s5); }

@media (max-width:860px) {
  .colunas       { grid-template-columns:minmax(0, 1fr); min-height:0; }
  .painel-resumo { padding: var(--s4) var(--s4) var(--s5); border-right:none; border-bottom:1px solid var(--fio); }
  .painel-form   { padding:var(--s6) var(--s4) var(--s7); max-width:none; }

  /* Resumo compacto: o formulário precisa aparecer na primeira tela. */
  .resumo-topo  { flex-direction:row; justify-content:space-between; align-items:center; margin-bottom:var(--s3); }
  .resumo-itens { border-top:0; margin-top:var(--s2); padding-top:0; }
  .resumo-valor { font-size:var(--t-sub); margin:var(--s1) 0 0; }
  .resumo-aviso { margin-top:var(--s3); padding-top:var(--s3); }

}
@media (max-width:480px) {
  .form-linha, .abas { grid-template-columns:1fr; }
  .pix-caixa  { flex-direction:column; align-items:stretch; }
}