/*
 * Fluxo de compra do site: checkout (/ativar/) e pedido (PIX → obrigado).
 * Tokens, reset e botões vêm do site-base.css; aqui só o que é do fluxo.
 * Medidas copiadas do design "Alpes Funil v3" (telas 02, 03 e 04).
 */

/* ───────────────────────── Moldura: header, main, rodapé ───────────────────────── */

.fluxo {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.fluxo-header { border-bottom: 1px solid var(--line-soft); }
.fluxo-header__in {
  max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.fluxo-header__ajuda { padding: 0 16px; font-size: 14px; }

.fluxo-main {
  flex: 1; width: 100%; margin: 0 auto;
  padding: clamp(24px, 4vw, 40px) var(--gutter) clamp(48px, 6vw, 80px);
}
.fluxo-main:focus { outline: none; }
.fluxo-main--checkout { max-width: 1120px; padding-top: clamp(28px, 5vw, 56px); }
.fluxo-main--pix { max-width:1120px; padding-top:clamp(28px,5vw,56px); }
.fluxo-main--obrigado { max-width: 1120px; }

.fluxo-footer { margin-top: auto; border-top: 1px solid var(--line-soft); }
.fluxo-footer__in {
  max-width: 1120px; margin: 0 auto; padding: 20px var(--gutter);
  font-size: 13px; color: var(--mut);
}

/* Títulos e parágrafos que recebem foco por script (troca de etapa/tela). */
[data-step-h]:focus, [data-foco]:focus { outline: none; }

/* Pílulas pequenas: "Recomendado", "Opcional", "CPF válido". */
.selo {
  display: inline-block; padding: 3px 9px; border-radius: 9999px;
  font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--ink);
}
.selo--lime { background: var(--lime); }
.selo--doc { background: #ececea; }
.selo--doc.is-valido { background: var(--lime); }

/* Mensagens gerais de erro do envio (fora de um campo). */
.aviso {
  margin: 0; padding: 12px 16px; border-radius: 12px;
  background: #fbefee; color: var(--err); font-size: 14px; line-height: 1.5;
}
.aviso a { color: var(--err); font-weight: 600; }
.aviso a:hover { color: var(--ink); }
.aviso--bloco { background: var(--card); color: var(--sub); font-size: 15px; }
.aviso--bloco a { color: var(--ink); }
.aviso--escuro { background: #2a1a18; color: #ffb4a8; }

/* Honeypot: fora da tela, sem ocupar espaço e sem foco. */
.hp {
  position: absolute !important; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ───────────────────────── 02 Checkout ───────────────────────── */

.ck-titulo {
  margin: 0 0 8px; font-size: clamp(36px, 5vw, 56px); line-height: 1.05;
  font-weight: 500; letter-spacing: -0.04em;
}
.ck-sub { margin: 0 0 clamp(28px, 4vw, 40px); font-size: 17px; line-height: 1.55; color: var(--mut); }
.ck-sub + noscript .aviso { margin-bottom: 20px; }

.ck-layout { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 32px); align-items: flex-start; }
.ck-form { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Etapa do acordeão: ativa (branca, borda preta), concluída e pendente (cinza). */
.etapa {
  border-radius: 24px; background: var(--card); border: 1.5px solid var(--card);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.etapa.is-ativa { background: var(--white); border-color: var(--ink); }

.etapa__cab { min-height: 76px; padding: 16px 20px 16px 24px; display: flex; align-items: center; gap: 14px; }
.etapa__num {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--white); color: var(--mut);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
}
.etapa.is-ativa .etapa__num { background: var(--lime); color: var(--ink); }
.etapa.is-feita .etapa__num { background: var(--ink); color: var(--lime); }
.etapa__tit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.etapa__h { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; color: var(--mut); }
.etapa.is-ativa .etapa__h, .etapa.is-feita .etapa__h { color: var(--ink); }
.etapa__resumo { font-size: 14px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapa__alterar {
  flex-shrink: 0; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px;
  background: var(--white); font-size: 14px; font-weight: 500;
  transition: background-color 150ms ease;
}
.etapa__alterar:hover { background: #e9e9e6; }

.etapa__corpo { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 24px; }
.etapa__intro { margin: 0; font-size: 15px; line-height: 1.5; color: var(--mut); }
.etapa__avancar { padding: 0 24px; }

.ck-rotulo { margin: 0; font-size: 14px; font-weight: 600; }
.ck-radios { display: flex; flex-direction: column; gap: 10px; }
.ck-periodo, .ck-pagamento { display: flex; flex-direction: column; gap: 10px; }
.ck-dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* Cartões de opção (role=radio): plano, período e forma de pagamento. */
.opcao {
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--white);
  text-align: left; color: var(--ink); transition: border-color 150ms ease;
}
.opcao:hover, .opcao[aria-checked="true"] { border-color: var(--ink); }
.opcao--plano {
  width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; padding: 16px 18px;
}
.opcao--fixa { cursor: default; }
.opcao--dias {
  min-height: 68px; padding: 12px 14px; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 2px;
}
.opcao__dot {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--field); background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.opcao__dot > span { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.opcao[aria-checked="true"] .opcao__dot { border-color: var(--ink); background: var(--ink); }
.opcao[aria-checked="true"] .opcao__dot > span { background: var(--lime); }
.opcao__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcao__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.opcao__nome { font-size: 17px; font-weight: 500; }
.opcao__who { font-size: 14px; line-height: 1.4; color: var(--mut); }
.opcao__preco { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.opcao__valor { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.opcao__dia { font-size: 12px; color: var(--mut); }
.opcao__label { font-size: 16px; font-weight: 500; }
.opcao__sub { font-size: 14px; color: var(--mut); font-variant-numeric: tabular-nums; }

/* Campos de texto */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; }
.campo__rotulo { font-size: 14px; font-weight: 600; }
.campo__input {
  width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--card); font-size: 16px; outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.campo__input--num { font-variant-numeric: tabular-nums; }
.campo__input--doc { letter-spacing: 0.02em; }
.campo__input--select { padding: 0 12px; }
.campo__input--area { height: auto; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.campo__input[aria-invalid="true"] { border-color: var(--err); }
.campo__input:focus { border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 4px var(--lime); }
.campo__input::placeholder { color: #8f8f8a; }
.campo__erro { font-size: 14px; color: var(--err); }
.campo__dica { font-size: 14px; color: var(--mut); }
.campo__dica--fixa { line-height: 1.45; }

.ck-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }

/* Aceite dos Termos: alvo de 44px com a caixa de 24px dentro. */
.aceite { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px; align-items: start; }
.aceite__btn {
  width: 44px; height: 44px; margin: -10px 0 0 -10px; padding: 0; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
}
.aceite__box {
  width: 24px; height: 24px; border: 1.5px solid var(--field); border-radius: 7px; background: var(--white);
  display: flex; align-items: center; justify-content: center; color: var(--lime);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.aceite__box svg { visibility: hidden; }
.aceite__btn[aria-checked="true"] .aceite__box { background: var(--ink); border-color: var(--ink); }
.aceite__btn[aria-checked="true"] .aceite__box svg { visibility: visible; }
.aceite__btn[aria-invalid="true"] .aceite__box { border-color: var(--err); }
.aceite__txt { display: flex; flex-direction: column; gap: 6px; }
.aceite__txt > span:first-child { font-size: 15px; line-height: 1.5; color: var(--sub); cursor: pointer; }

.ck-final { display: flex; flex-direction: column; gap: 12px; }
.ck-nota { margin: 0; font-size: 14px; color: var(--mut); text-align: center; }

/* Resumo lateral (escuro, fixo na rolagem quando há espaço ao lado). */
.resumo {
  flex: 1 1 300px; min-width: 0; position: sticky; top: 24px; overflow: hidden;
  border-radius: 24px; background: var(--ink); color: var(--white); padding: 28px;
}
.resumo__bola {
  position: absolute; right: -40px; top: -40px; width: 96px; height: 96px;
  border-radius: 50%; background: var(--lime);
}
.resumo__in { position: relative; display: flex; flex-direction: column; gap: 20px; }
.resumo__rotulo { margin: 0; font-size: 14px; color: var(--dark-sub); }
.resumo__plano { margin: 0; font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.resumo__dias { margin: 6px 0 0; font-size: 14px; color: var(--dark-sub); }
.resumo__lista {
  margin: 0; padding: 16px 0 0; border-top: 1px solid var(--dark-line); list-style: none;
  display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; color: #d4d4d4;
}
.resumo__lista li { display: flex; gap: 10px; }
.resumo__ico { flex-shrink: 0; margin-top: 2px; color: var(--lime); }
.resumo__total {
  padding-top: 16px; border-top: 1px solid var(--dark-line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.resumo__total-rot { font-size: 15px; }
.resumo__total-val { font-size: 36px; font-weight: 500; line-height: 1.5; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.resumo__dia { margin: -12px 0 0; font-size: 13px; color: var(--dark-sub); text-align: right; }

/* ───────────────────────── 03 PIX ───────────────────────── */

.pd-carregando {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 240px; font-size: 15px; color: var(--mut);
}
.pd-carregando__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
  animation: alpPulse 900ms ease-in-out infinite;
}

.pd-erro { padding: clamp(24px, 4vw, 40px) 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pd-erro__h { margin: 0; font-size: clamp(28px, 4vw, 36px); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; }
.pd-erro__p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--mut); }
.pd-erro__acoes { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; }

.pix-topo { margin: 0; }
.pix-layout { display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,32px); align-items:stretch; }
.pix-card { flex:999 1 520px; min-width:0; overflow:hidden; border-radius:24px; border:1.5px solid var(--line-soft); background:var(--white); }
.pix-card__topo { min-height:76px; padding:16px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.pix-card__timer { margin:0; font-size:15px; color:var(--mut); }
.pix-card__timer b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.pix-card__barra { height:3px; background:var(--soft); }
.pix-card__barra-in { height:100%; width:0; background:var(--ink); transition:width 1s linear; }
.pix-vivo { padding:clamp(24px,3vw,32px) 24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:32px; align-items:center; }
/* QR com cantos de visor. A área é branca e tem respiro: os apps de banco
   precisam da margem clara em volta do código (a biblioteca não desenha). */
.qr { position:relative; justify-self:center; width:min(100%,260px); aspect-ratio:1; }
.qr__canto { position:absolute; width:24px; height:24px; border:0 solid var(--ink); }
.qr__canto--tl { left:0; top:0; border-left-width:2.5px; border-top-width:2.5px; border-top-left-radius:12px; }
.qr__canto--tr { right:0; top:0; border-right-width:2.5px; border-top-width:2.5px; border-top-right-radius:12px; }
.qr__canto--bl { left:0; bottom:0; border-left-width:2.5px; border-bottom-width:2.5px; border-bottom-left-radius:12px; }
.qr__canto--br { right:0; bottom:0; border-right-width:2.5px; border-bottom-width:2.5px; border-bottom-right-radius:12px; }
.qr__area { position:absolute; inset:12px; padding:10px; border-radius:8px; background:var(--white); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.qr__code { width:100%; }
.qr__code canvas,.qr__code img { width:100% !important; height:auto !important; image-rendering:pixelated; }
.qr__code:empty { display:none; }
.qr.is-falha .qr__area { background:var(--card); }
.qr__falha { margin:0; padding:0 8px; font-size:14px; line-height:1.45; color:var(--mut); text-align:center; }
.pix-instrucoes { min-width:0; display:flex; flex-direction:column; gap:20px; }
.pix-desktop-intro h2 { margin:0 0 6px; font-size:22px; font-weight:500; letter-spacing:-.02em; }
.pix-desktop-intro p { margin:0; font-size:15px; line-height:1.5; color:var(--mut); }
.copia { display:flex; flex-direction:column; gap:8px; padding-top:20px; border-top:1px solid var(--line-soft); }
.copia__input { width:100%; min-width:0; height:52px; padding:0 16px; border:1.5px solid var(--line); border-radius:12px; background:var(--card); font-size:14px; color:var(--sub); text-overflow:ellipsis; }
.copia__input:focus { outline:2px solid var(--ink); outline-offset:2px; }
.copia__btn { min-height:52px; margin-top:8px; font-size:16px; }
.aguardando { margin:0; min-height:36px; padding:0 14px 0 12px; display:flex; align-items:center; gap:10px; border-radius:999px; background:var(--lime); font-size:14px; font-weight:500; }
.aguardando__dot { flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--ink); animation:pixPulse 1.8s ease-out infinite; }
.aguardando.is-pago .aguardando__dot { animation:none; }
@keyframes pixPulse { 0% { box-shadow:0 0 0 0 rgba(14,14,14,.45); } 70% { box-shadow:0 0 0 7px rgba(14,14,14,0); } 100% { box-shadow:0 0 0 0 rgba(14,14,14,0); } }
.pix-vivo__nota { display:none; margin:0; font-size:15px; line-height:1.5; color:var(--mut); text-align:center; }
.pix-mobile-total,.pix-qr-toggle { display:none; }
.pix-resumo { position:relative; top:auto; display:flex; flex-direction:column; }
.pix-resumo .resumo__in { flex:1; }
.pix-resumo__plano { margin:0; font-size:26px; font-weight:500; line-height:1.15; letter-spacing:-.02em; }
.pix-resumo__dias { margin:6px 0 0; font-size:14px; color:var(--dark-sub); }
.pix-resumo__total { padding-top:16px; border-top:1px solid var(--dark-line); display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.pix-resumo__total b { font-size:36px; font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.pix-alterar { margin-top:auto; min-height:48px; color:var(--white); background:transparent; border:1.5px solid #3a3a3a; }
.pix-alterar:hover { color:var(--white); background:#1f1f1f; border-color:#555; }
.pix-como { margin-top:clamp(40px,5vw,64px); }
.pix-como h2 { margin:0 0 20px; font-size:clamp(24px,3vw,32px); font-weight:500; letter-spacing:-.03em; }
.pix-passos { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); column-gap:24px; }
.pix-passos li { padding:24px 12px 24px 0; border-top:1px solid var(--line-soft); }
.pix-passos li>span { font-size:40px; font-weight:500; line-height:1; }
.pix-passos h3 { margin:10px 0 6px; font-size:17px; font-weight:500; }
.pix-passos p { margin:0; font-size:15px; color:var(--mut); }
.pix-passos b { color:var(--ink); font-weight:600; }
.pix-avanco { margin-top:clamp(32px,4vw,48px); border-radius:24px; padding:clamp(24px,4vw,36px) 24px; background:var(--ink); color:var(--white); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; }
.pix-avanco h2 { margin:0; max-width:26ch; font-size:clamp(20px,2.4vw,26px); font-weight:500; line-height:1.25; letter-spacing:-.02em; }
.pix-avanco p { margin:0; max-width:34em; color:#bdbdbd; font-size:15px; line-height:1.55; }
.pix-fim { padding:32px 24px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.pix-fim__h { margin:0; font-size:24px; font-weight:500; line-height:1.25; letter-spacing:-.02em; }
.pix-fim__p { margin:0; font-size:16px; line-height:1.5; color:var(--mut); }
.pix-fim__btn,.pix-fim__acoes { margin-top:8px; }
.pix-fim__acoes { display:flex; flex-wrap:wrap; gap:10px; }
.passos { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.passos__item { min-height:53px; display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.4; }
.passos__n { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--white); font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; }
/* Celular (igual ao design abaixo de 640px): total, copiar, dica, QR sob demanda.
   O campo do código some da tela, mas fica no DOM para a cópia manual e para o
   leitor de tela; se a cópia automática falhar, ele reaparece (.is-manual). */
@media(max-width:639px) {
  .pix-vivo { display:flex; flex-direction:column; align-items:stretch; padding:24px 20px; gap:16px; }
  .pix-mobile-total { order:1; display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); color:var(--mut); font-size:15px; }
  .pix-mobile-total b { font-size:28px; font-weight:500; letter-spacing:-.03em; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .pix-instrucoes { order:2; gap:16px; }
  .pix-desktop-intro { display:none; }
  .copia { padding:0; border:0; gap:8px; }
  .copia:not(.is-manual) .copia__rotulo, .copia:not(.is-manual) .copia__input {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .copia__btn { min-height:56px; font-size:17px; }
  .pix-vivo__nota { display:block; }
  .pix-qr-toggle {
    order:3; display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 18px;
    border:1.5px solid var(--line); border-radius:12px; background:var(--white); color:var(--ink);
    font-size:15px; font-weight:500; transition:background-color 150ms ease;
  }
  .pix-qr-toggle:hover { background:var(--card); }
  .qr { order:4; display:none; align-self:center; }
  .qr.is-aberto { display:block; }
}

/* ───────────────────────── 04 Obrigado ───────────────────────── */

.ob-topo {
  border-radius: 32px; background: var(--lime);
  padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 40px; align-items: center;
}
.ob-topo__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ob-selo {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 9999px;
  background: var(--ink); color: var(--white); font-size: 14px; font-weight: 500;
}
.ob-selo__ico {
  width: 20px; height: 20px; border-radius: 50%; background: var(--lime); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.ob-topo__h { margin: 0; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; font-weight: 500; letter-spacing: -0.04em; }
.ob-topo__p { margin: 0; font-size: 18px; line-height: 1.55; color: #2e2e2e; }

.ob-cartao { justify-self:center; width:min(100%,360px); min-width:0; padding:24px; border-radius:24px; background:var(--white); box-shadow:0 20px 48px rgba(14,14,14,.12); display:flex; flex-direction:column; gap:16px; transform:rotate(1.5deg); }
.ob-cartao__titulo { font-size:15px; font-weight:600; }
.ob-cartao__campo { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ob-cartao__rot { font-size:13px; color:var(--mut); }
.ob-cartao__email { overflow-wrap:anywhere; font-size:16px; font-weight:500; }
.ob-cartao__nota { margin:0; font-size:13px; line-height:1.5; color:var(--mut); }
.ob-senha { display:flex; align-items:center; gap:8px; padding:6px 6px 6px 16px; border-radius:12px; background:var(--card); }
.ob-senha__valor { flex:1; min-width:0; font-family:var(--mono); font-size:18px; font-weight:600; line-height:1.35; letter-spacing:.06em; font-variant-ligatures:none; overflow-wrap:anywhere; }
.ob-senha__mostrar,.ob-senha__copiar { flex-shrink:0; height:40px; padding:0 12px; border:0; border-radius:10px; font-size:13px; font-weight:500; transition:background-color 150ms ease; }
.ob-senha__mostrar { background:transparent; color:var(--ink); }
.ob-senha__mostrar:hover { background:#e9e9e6; }
.ob-senha__copiar { min-width:84px; padding:0 14px; background:var(--ink); color:var(--white); }
.ob-senha__copiar:hover { background:var(--ink-hover); }
.ob-passos-login { margin-top:auto; background:var(--white); }
.ob-passos-login:hover { background:var(--soft-hover); }

.ob-grid {
  margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px; align-items: stretch;
}
/* Extensão: só o recibo fica na grade; sem isso ele esticaria a largura toda. */
.ob-grid--um { grid-template-columns: minmax(0, 560px); }
.ob-bloco { padding:28px; border-radius:24px; display:flex; flex-direction:column; gap:12px; }
.ob-bloco--card { background: var(--card); }
.ob-bloco--linha { border: 1px solid var(--line-soft); background: var(--white); }
.ob-bloco__h { margin: 0 0 8px; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.ob-bloco__h--recibo { margin-bottom: 4px; }

.recibo { margin:0; border-top:1px solid var(--line-soft); flex:1; display:flex; flex-direction:column; }
.recibo__linha {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 15px;
}
.recibo__linha dt { color: var(--mut); }
.recibo__linha dd { margin: 0; text-align: right; }
.recibo__linha--total { margin-top:auto; align-items: baseline; padding: 14px 0 0; border-bottom: 0; }
.recibo__linha--total dt { font-size: 15px; font-weight: 600; color: var(--ink); }
.recibo__linha--total dd { font-size: 30px; font-weight: 500; line-height: 1.3; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.ob-upsell {
  padding: 28px; border-radius: 24px; background: var(--ink); color: var(--white);
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}
.ob-upsell__tag { align-self:flex-start; padding: 3px 10px; }
.ob-upsell__h { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.ob-upsell__p { margin: 0; font-size: 15px; line-height: 1.55; color: #bdbdbd; }
.ob-upsell__p b { font-weight: 600; color: var(--white); }
.ob-upsell__btn { margin-top:auto; }
.ob-upsell__nota { margin: 0; font-size: 14px; color: var(--dark-sub); }

.ob-ajuda { margin: clamp(32px, 4vw, 48px) 0 0; font-size: 15px; line-height: 1.55; color: var(--mut); }

.ob-topo__h { overflow-wrap:anywhere; }
/* Telas muito estreitas (320–379px): a senha ganha a linha toda e os botões
   descem, senão o código quebraria letra a letra. */
@media(max-width:379px) {
  .ob-topo { padding:32px 20px; }
  .ob-cartao { padding:20px; }
  .ob-senha { flex-wrap:wrap; padding:6px; }
  .ob-senha__valor { flex:1 1 100%; padding:8px 10px 4px; }
  .ob-senha__mostrar,.ob-senha__copiar { flex:1; }
}