/* ============================================================
   O quadrinho de contribuir e a gaveta que ele abre.

   Arquivo à parte do styles.css: isto é da lista de presentes e só
   dela, e o styles.css já é grande e compartilhado por todas as
   páginas.
   ============================================================ */

/* ---------- a faixa "lista ao vivo" ---------- */

/* A régua fina `.faixa-viva` mudou de casa: foi pro styles.css porque a
   home usa a mesma peça, e regra duplicada em dois arquivos foi o que já
   deu discordância aqui antes. */

/* ---------- a faixa no rodapé ---------- */

/* Chamada horizontal, como uma segunda lombada da lista. As miniaturas
   antecipam o que existe atrás do clique e fazem a contribuição competir
   em pé de igualdade com os presentes, sem cobrir a página inteira. */
.faixa-contribuir {
  position: fixed;
  left: 50%;
  bottom: calc(0.65rem + env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(var(--e2), 2vw, var(--e4));
  width: min(68rem, calc(100vw - var(--margem) * 2));
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: 16px;
  background: var(--navy);
  color: var(--branco);
  box-shadow: 0 6px 8px rgb(17 27 62 / 0.24);
  cursor: pointer;
  text-align: left;
  transform: translate(-50%, calc(100% + var(--e5)));
  transition: transform 0.36s var(--suave), background-color 0.2s ease;
}

.faixa-contribuir[data-visivel="sim"] { transform: translate(-50%, 0); }

@media (hover: hover) {
  .faixa-contribuir:hover { background: var(--azul-escuro); }
}

@media (prefers-reduced-motion: reduce) {
  .faixa-contribuir { transition: none; }
}

.faixa-contribuir-fotos { display: flex; padding-left: 0.2rem; }
.faixa-contribuir-fotos img {
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -0.55rem;
  border: 2px solid var(--navy);
  border-radius: 50%;
  object-fit: cover;
}
.faixa-contribuir-fotos img:first-child { margin-left: 0; }
.faixa-contribuir-texto { display: grid; gap: 0.08rem; min-width: 0; }
.faixa-contribuir-texto b {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 400;
  line-height: 1.1;
}
.faixa-contribuir-texto i {
  overflow: hidden;
  font-family: var(--serif);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.25;
  color: rgb(255 255 255 / 0.72);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.faixa-contribuir-acao {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  font-family: var(--apoio);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.faixa-contribuir-acao span { font-size: 1rem; line-height: 0; }

/* ---------- o convite grande, no fim da lista ---------- */

.doacao-convite {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--e3);
  justify-items: center;
  text-align: center;
  padding: var(--e6) var(--e4);
  border: 1px solid var(--linha);
  border-radius: 18px;
  background: var(--papel-2);
}

.doacao-convite-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}

.doacao-convite-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* a foto é ambiente, não assunto: bem apagada, para o texto mandar */
  opacity: 0.22;
  filter: grayscale(0.3);
}

.doacao-convite::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--toile);
  background-size: var(--ladrilho, 380px);
  mix-blend-mode: multiply;
  opacity: 0.16;
  /* flor só na borda, miolo limpo — mesma máscara do hero */
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 58%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 58%, #000 100%);
  pointer-events: none;
}

/* ---------- a gaveta ---------- */

.gaveta { position: fixed; inset: 0; z-index: 60; }

.gaveta-fundo {
  position: absolute;
  inset: 0;
  background: rgb(25 26 58 / 0.45);
  opacity: 0;
  transition: opacity 0.28s var(--suave);
}

.gaveta[data-aberta="sim"] .gaveta-fundo { opacity: 1; }

.gaveta-painel {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 96dvh;
  max-height: 58rem;
  background: var(--papel);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 8px rgb(25 26 58 / 0.2);
  transform: translateY(100%);
  transition: transform 0.42s var(--suave);
}

.gaveta[data-aberta="sim"] .gaveta-painel { transform: translateY(0); }

/* A mesma folha sobe em todos os tamanhos. No desktop ela ganha margens,
   revelando um pouco da lista atrás e deixando claro que é uma camada. */
@media (min-width: 720px) {
  .gaveta-painel {
    inset: auto clamp(1rem, 3vw, 3rem) 0;
    width: auto;
    height: min(96dvh, 58rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gaveta-fundo, .gaveta-painel { transition: none; }
}

/* o fundo não rola atrás da gaveta aberta */
body[data-gaveta="aberta"] { overflow: hidden; }

.gaveta-topo {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) clamp(var(--e4), 4vw, var(--e7)) var(--e2);
}

/* três passos à vista: a pessoa sabe quanto falta antes de começar */
.gaveta-etapas {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin: 0 clamp(var(--e4), 4vw, var(--e7));
  padding: 0 0 var(--e3);
  list-style: none;
}
.gaveta-etapas li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  background: var(--papel-2);
  font-family: var(--apoio);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(25 26 58 / 0.4);
}
.gaveta-etapas li:not(:last-child)::after {
  display: none;
}
.gaveta-etapas b {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--branco);
  font-size: 0.62rem;
}
.gaveta-etapas .ativa,
.gaveta-etapas .feita { color: var(--azul); }
.gaveta-etapas .ativa b,
.gaveta-etapas .feita b { border-color: var(--azul); }
.gaveta-etapas .ativa b { background: var(--azul); color: var(--branco); }
.gaveta-etapas .ativa { background: rgb(180 196 234 / 0.42); }
.gaveta-etapas .feita { background: rgb(180 196 234 / 0.18); }
.gaveta-etapas .feita b::after { content: "✓"; font-size: 0.68rem; }
.gaveta-etapas .feita b { font-size: 0; }

/* alça de arrastar: só no celular, onde a gaveta vem de baixo */
.gaveta-alca {
  position: absolute;
  top: 0.5rem; left: 50%;
  transform: translateX(-50%);
  width: 2.5rem; height: 0.25rem;
  border-radius: 99px;
  background: var(--linha-forte);
}

.gaveta-titulo {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  line-height: 1.1;
  color: var(--azul);
}

.gaveta-sub {
  margin: 0.2rem 0 0;
  font-family: var(--serif);
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgb(25 26 58 / 0.7);
}

.gaveta-fechar {
  margin-left: auto;
  flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--branco);
  font-size: 1rem;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
}

.gaveta-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e3) var(--e4);
  padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom));
}

@media (min-width: 720px) {
  .gaveta-corpo {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    overflow: hidden;
    padding-inline: clamp(2rem, 5vw, 6rem);
  }
  .gaveta-corpo:has(#gaveta-fim:not([hidden])) { justify-content: flex-start; }
}

/* Notebook baixo: mantém duas fileiras legíveis e reduz apenas os respiros.
   Assim as imagens continuam grandes o bastante para serem reconhecidas. */
@media (min-width: 720px) and (max-height: 650px) {
  .gaveta-painel { height: 100dvh; border-radius: 0; }
  .gaveta-topo { padding-block: 0.55rem 0.35rem; }
  .gaveta-titulo { font-size: 1.35rem; }
  .gaveta-sub { font-size: 0.72rem; }
  .gaveta-etapas { padding-bottom: 0.45rem; }
  .gaveta-etapas li { padding-block: 0.25rem; }
  .gaveta-corpo { padding-block: 0.55rem; }
  .gaveta-passo-cabecalho { margin-bottom: 0.55rem; }
  .gaveta-passo-cabecalho h3 { font-size: 1.35rem; }
  .gaveta-passo-cabecalho > p:last-child { margin-top: 0.15rem; font-size: 0.72rem; }
  .cotas { gap: 0.4rem; }
  .cota { gap: 0.2rem; padding: 0.25rem 0.25rem 0.35rem; }
  .cota-titulo { font-size: 0.62rem; }
  .cota-valor { font-size: 0.74rem; }
  .cota-livre { grid-template-rows: minmax(0, 1fr) auto auto; padding: 0.45rem; }
  .cota-livre-chamada b { font-size: 0.9rem; }
  .cota-livre-chamada p { display: none; }
  .cota-ajustes button { min-height: 1.35rem; font-size: 0.56rem; }
}

.gaveta-passo-cabecalho { margin-bottom: clamp(0.45rem, 1.3vh, var(--e3)); }
.gaveta-passo-cabecalho h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.15;
  color: var(--navy);
}
.gaveta-passo-cabecalho > p:last-child {
  max-width: 38rem;
  margin: 0.35rem 0 0;
  font-family: var(--serif);
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgb(25 26 58 / 0.65);
}

/* ---------- as cotas ---------- */

.cotas-selo,
.gaveta-ou {
  margin: 0 0 var(--e1);
  font-family: var(--apoio);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(25 26 58 / 0.5);
}

.gaveta-ou { margin-top: var(--e5); }

.cotas {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  min-height: 0;
}
.cotas > .cota { grid-column: span 2; }
/* quatro cartões na segunda fileira, centralizados sob os cinco de cima */
.cotas > .cota:nth-child(6) { grid-column: 2 / span 2; }

/* Cartão visual: a imagem é o primeiro argumento; o título explica a piada
   e o valor fica sempre no mesmo lugar para comparar rapidamente. */
.cota {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(2.25rem, auto) auto;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.35rem 0.35rem 0.5rem;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--branco);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, translate 0.18s ease;
}

.cota:hover { border-color: var(--linha-forte); translate: 0 -2px; }

.cota.ativa {
  border-color: var(--azul);
  box-shadow: 0 0 0 2px rgb(46 81 163 / 0.18);
}

.cota-capa {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  height: 100%;
  border-radius: 10px;
  background: var(--pervinca-clara);
  overflow: hidden;
}

.cota-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* sem foto, a estampa da identidade no lugar de um cinza qualquer */
.cota-capa[data-flores="sim"] {
  background-color: var(--pervinca-clara);
  background-image: var(--toile);
  background-size: 90px;
}

.cota-titulo {
  font-family: var(--serif);
  padding-inline: 0.2rem;
  font-size: clamp(0.68rem, 0.82vw, 0.76rem);
  line-height: 1.2;
  color: var(--navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* título longo não empurra a linha de baixo */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cota-valor {
  padding-inline: 0.2rem;
  font-family: var(--numeros);
  font-size: clamp(0.82rem, 1vw, 0.94rem);
  font-weight: 700;
  color: var(--azul);
}

.cota-livre {
  grid-column: auto;
  grid-template-rows: minmax(0, 1fr) auto auto;
  padding: 0.65rem;
  border: 1px solid var(--azul);
  background: var(--papel-2);
}
.cota-livre-chamada { display: grid; align-content: center; gap: 0.2rem; }
.cota-livre-chamada > span {
  font-family: var(--apoio);
  font-size: 0.54rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul);
}
.cota-livre-chamada b {
  font-family: var(--display);
  font-size: clamp(0.92rem, 1.25vw, 1.18rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--navy);
}
.cota-livre-chamada p {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.66rem;
  line-height: 1.2;
  color: rgb(25 26 58 / 0.68);
}
.cota-livre-campo {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  width: 100%;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--azul);
  color: var(--navy);
}
.cota-livre-campo span { font-family: var(--numeros); font-weight: 600; }
.cota-livre-campo input {
  min-width: 0;
  padding: 0;
  border: 0;
  font-family: var(--numeros);
  font-size: 1.05rem;
  font-weight: 600;
}
.cota-ajustes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
}
.cota-ajustes button {
  min-height: 1.55rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--branco);
  font-family: var(--numeros);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--azul);
  cursor: pointer;
}
.cota-ajustes button:hover { background: var(--azul); color: var(--branco); }


/* ---------- o resto do formulário ---------- */

.gaveta .campo { margin-bottom: var(--e3); }

#gaveta-enviar { margin-top: var(--e2); }

.gaveta-nota {
  margin: var(--e3) 0 0;
  font-family: var(--apoio);
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgb(25 26 58 / 0.55);
}

.gaveta-fim-titulo {
  margin: 0 0 var(--e2);
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--azul);
  text-align: center;
}

.gaveta-fim-texto {
  margin: 0 0 var(--e4);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  text-align: center;
  color: var(--navy);
}

/* ---------- dois campos na mesma linha ---------- */
.gaveta-dados {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--e4);
}
.gaveta-dados textarea {
  min-height: 7.5rem;
  padding: var(--e2);
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  background: var(--branco);
  resize: none;
}
.gaveta-resumo {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--e3);
  align-items: center;
  margin-bottom: var(--e4);
  padding: var(--e2);
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--branco);
}
.gaveta-resumo:empty { display: none; }
.gaveta-resumo img {
  width: 5rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 9px;
}
.gaveta-resumo span { display: grid; gap: 0.25rem; }
.gaveta-resumo b { font-family: var(--serif); font-size: 0.95rem; line-height: 1.25; }
.gaveta-resumo strong { font-family: var(--numeros); font-size: 1.1rem; color: var(--azul); }
.gaveta-corpo .campo { margin-bottom: var(--e2); }
.gaveta-corpo .campo:last-child { margin-bottom: 0; }

/* ---------- "o que você quer que seja?" ----------
   Só quem digitou o próprio valor vê este bloco (o JS liga em `pintaResumo`).
   Ele fica colado no resumo, e não junto de nome e recado, porque fala do
   PRESENTE — é a continuação do cartão, não mais um dado da pessoa. */
#gaveta-desejo-campo { margin-bottom: var(--e3); }

.desejo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--e2);
}

/* Mesmo desenho das sugestões de e-mail do RSVP — pílula de contorno que
   inverte quando escolhida. `aria-pressed` é o estado de verdade: ele pinta
   o chip E conta a mesma coisa para o leitor de tela, sem classe paralela
   para manter em sincronia. */
.desejo-chip {
  min-height: 44px;             /* alvo de toque: pílula fina o dedo erra */
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--branco);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.2;
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.2s var(--suave), border-color 0.2s var(--suave), color 0.2s var(--suave);
}
.desejo-chip:hover { border-color: var(--azul); }
.desejo-chip[aria-pressed="true"] {
  border-color: var(--azul);
  background: var(--azul);
  color: var(--branco);
}

#gaveta-desejo-campo .ajuda-campo { font-size: 0.72rem; line-height: 1.4; }

@media (min-width: 720px) {
  #gaveta-form {
    align-self: center;
    width: 100%;
  }
  #gaveta-form .gaveta-passo-cabecalho { margin-bottom: 0.65rem; }
  #gaveta-form .gaveta-resumo { margin-bottom: 0.8rem; }
  #gaveta-form .gaveta-dados textarea { min-height: 5.5rem; }
  .gaveta-corpo:has(#gaveta-form:not([hidden])) { padding-bottom: calc(var(--e4) - 0.25rem); }

  /* O corpo é `overflow: hidden` aqui porque cada etapa cabe inteira na
     folha. O bloco do desejo acrescenta rótulo, campo, cinco sugestões e a
     nota — num notebook baixo isso passa da altura, e com hidden o que passa
     não rola: some, levando junto o botão. Então a rolagem liga só quando o
     bloco está na tela, a mesma saída do acordeão do Pix mais abaixo.
     O `#gaveta-form:not([hidden])` é obrigatório: nas etapas 1 e 3 quem está
     escondido é o formulário inteiro, não o bloco. */
  .gaveta-corpo:has(#gaveta-form:not([hidden]) #gaveta-desejo-campo:not([hidden])) {
    overflow-y: auto;
  }
}

/* ---------- rodapé grudado ----------
   O botão morava no fim do formulário e sumia junto com a rolagem. Aqui
   ele nasce escondido e sobe assim que existe um valor pra confirmar. */
.gaveta-pe {
  flex: 0 0 auto;
  padding: var(--e2) var(--e4) var(--e3);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
  background: var(--papel);
  animation: gaveta-pe-sobe 0.28s var(--suave);
}
/* O vão entre o filete e o botão era --e2 em cima e --e3 embaixo. Numa
   faixa que já é só "um botão", isso é altura gasta com nada: a barra
   inteira empurrava a lista de cotas pra cima. Encostar o botão no filete
   devolve essa altura pro conteúdo, que é o que a pessoa veio ver. */
.gaveta-painel > .gaveta-pe { padding-block: 0.4rem var(--e2); }
/* o botão também era alto demais pro papel que faz aqui */
.gaveta-pe .botao { padding-block: 0.85em; }
.gaveta-pe[hidden] { display: none; }
@keyframes gaveta-pe-sobe {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .gaveta-pe { animation: none; } }

.gaveta-pe .form-status { margin: 0 0 var(--e2); }
.gaveta-pe .form-status:empty { margin: 0; }
.gaveta-pe-acoes { display: flex; align-items: center; gap: var(--e3); }
.gaveta-pe-acoes .botao { flex: 1; }
.gaveta-voltar {
  flex: 0 0 auto;
  padding: 0.8rem 0;
  border: 0;
  background: none;
  font-family: var(--apoio);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
}
.gaveta-pe .gaveta-nota {
  margin: var(--e1) 0 0;
  font-family: var(--apoio);
  font-size: 0.66rem;
  font-weight: 300;
  line-height: 1.45;
  text-align: center;
  color: rgb(25 26 58 / 0.55);
}

/* a gaveta não rola: tudo cabe. O overflow fica como rede de segurança
   pra tela muito baixa (celular deitado). */
/* espaço acima do filete: era --e4, e somado ao vão de baixo dava uma
   faixa morta entre a última cota e o botão */
.gaveta-corpo { padding-bottom: var(--e2); }

/* A etapa de escolha ocupa exatamente a área restante da folha. A grade
   recebe a altura disponível e reparte os cartões sem criar rolagem. */
#gaveta-cotas-bloco {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* `section` recebe um padding editorial global na página. Dentro da folha,
   cada passo é uma tela de interface e precisa começar no limite do corpo. */
.gaveta-passo { padding: 0; }

/* ---------- Pix inteiro na mesma tela ----------
   O painel do Pix é compartilhado com a página do produto. Na gaveta do
   desktop ele aproveita a largura: QR de um lado, dados e ações do outro.
   Assim nenhuma parte importante nasce cortada abaixo da dobra. */
@media (min-width: 720px) {
  .gaveta-painel:has(#gaveta-fim:not([hidden])) {
    inset-inline: clamp(1rem, 8vw, 8rem);
  }

  #gaveta-fim .gaveta-fim-titulo {
    margin-bottom: 0.2rem;
    font-size: 1.35rem;
  }
  #gaveta-fim .gaveta-fim-texto {
    margin-bottom: 0.65rem;
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* No desktop sobra largura, então as duas colunas continuam: o QR de
     um lado, conferência e ações do outro. O copia-e-cola virou um
     acordeão (`.pix-mais`), então ele é UM item da grade — antes o
     código e o botão de copiar eram duas áreas soltas. */
  #gaveta-fim .pix-painel {
    display: grid;
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
    grid-template-areas:
      "chamada ficha"
      "qr      ficha"
      "qr      mais"
      "valor   feito"
      ".       nota";
    align-items: start;
    column-gap: var(--e5);
    row-gap: 0.4rem;
  }

  #gaveta-fim .pix-chamada { grid-area: chamada; margin: 0; }
  #gaveta-fim .pix-qr {
    grid-area: qr;
    width: min(15rem, 100%);
    margin: 0 auto;
    padding: var(--e1);
  }
  #gaveta-fim .pix-valor { grid-area: valor; margin: 0; align-self: center; }
  #gaveta-fim .pix-ficha {
    grid-area: ficha;
    margin: 0;
    padding: var(--e2) var(--e3);
  }
  #gaveta-fim .pix-mais { grid-area: mais; margin: 0; }
  #gaveta-fim .pix-codigo { max-height: 3.4rem; }
  #gaveta-fim .pix-feito { grid-area: feito; margin: 0; align-self: center; }
  #gaveta-fim .pix-nota { grid-area: nota; margin: 0; }
  #gaveta-fim .pix-copiar,
  #gaveta-fim .pix-feito { padding-block: 0.55rem; }
}

@media (max-width: 719px) {
  .gaveta-painel {
    height: 96dvh;
    max-height: none;
  }
  .gaveta-topo {
    padding: 1.15rem 1rem 0.45rem;
  }
  .gaveta-titulo { font-size: 1.35rem; }
  .gaveta-sub { margin-top: 0.1rem; font-size: 0.72rem; line-height: 1.3; }
  .gaveta-fechar { width: 2.75rem; height: 2.75rem; }
  .gaveta-etapas {
    margin-inline: 1rem;
    padding-bottom: 0.45rem;
  }
  .gaveta-etapas span { display: none; }
  .gaveta-etapas li {
    display: grid;
    justify-items: center;
    min-height: 2.35rem;
    padding: 0.25rem;
  }
  .gaveta-etapas b { width: 1.65rem; height: 1.65rem; }
  .gaveta-corpo {
    overflow: hidden;
    padding: 0.45rem 0.65rem 0.6rem;
  }
  .gaveta-passo-cabecalho { margin-bottom: 0.35rem; }
  .gaveta-passo-cabecalho .cotas-selo { display: none; }
  .gaveta-passo-cabecalho h3 { font-size: 1.18rem; }
  .gaveta-passo-cabecalho > p:last-child {
    margin-top: 0.1rem;
    font-size: 0.66rem;
    line-height: 1.25;
  }
  .cotas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
  }
  .cotas > .cota,
  .cotas > .cota:nth-child(6) { grid-column: auto; }
  .cota {
    grid-template-rows: minmax(0, 1fr) minmax(1.6rem, auto) auto;
    gap: 0.18rem;
    padding: 0.22rem 0.22rem 0.3rem;
    border-radius: 10px;
  }
  .cota-capa { border-radius: 7px; }
  .cota-titulo {
    min-height: 0;
    padding-inline: 0.08rem;
    font-size: clamp(0.52rem, 2.5vw, 0.64rem);
    line-height: 1.08;
  }
  .cota-valor {
    padding-inline: 0.08rem;
    font-size: clamp(0.62rem, 3vw, 0.78rem);
  }
  .cota-livre {
    grid-template-rows: minmax(0, 1fr) auto auto;
    padding: 0.35rem;
  }
  .cota-livre-chamada { gap: 0.08rem; }
  .cota-livre-chamada > span { font-size: 0.42rem; }
  .cota-livre-chamada b { font-size: clamp(0.68rem, 3vw, 0.85rem); }
  .cota-livre-chamada p { display: none; }
  .cota-livre-campo { gap: 0.15rem; padding-bottom: 0.1rem; font-size: 0.7rem; }
  .cota-livre-campo input { font-size: 0.8rem; }
  .cota-ajustes { gap: 0.12rem; }
  .cota-ajustes button {
    min-width: 44px;
    min-height: 24px;
    padding: 0.1rem;
    font-size: 0.5rem;
  }
  .gaveta-dados { grid-template-columns: 1fr; gap: var(--e2); }
  .gaveta-dados textarea { min-height: 4rem; }
  /* na largura do celular cabem duas pílulas por linha; o 44px de altura
     fica, que é o dedo — o que encolhe é o respiro lateral e a letra */
  .desejo-chips { gap: 0.35rem; margin-top: var(--e1); }
  .desejo-chip { padding: 0.45rem 0.75rem; font-size: 0.82rem; }
  #gaveta-desejo-campo { margin-bottom: var(--e2); }
  .gaveta-resumo {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0.65rem;
    margin-bottom: 0.55rem;
    padding: 0.45rem;
  }
  .gaveta-resumo img { width: 3.25rem; }
  .gaveta-resumo b { font-size: 0.78rem; }
  .gaveta-resumo strong { font-size: 0.9rem; }
  .gaveta-pe {
    padding: 0.45rem 0.65rem calc(0.5rem + env(safe-area-inset-bottom));
  }
  .gaveta-painel > .gaveta-pe {
    padding-block: 0.45rem calc(0.5rem + env(safe-area-inset-bottom));
  }
  .gaveta-pe-acoes { gap: 0.65rem; }
  .gaveta-pe .botao { min-height: 2.75rem; padding-block: 0.55rem; }
  .gaveta-pe .gaveta-nota { display: none; }
  .gaveta-voltar { min-height: 44px; }

  /* Pix em coluna única no celular.

     Antes o QR dividia a largura com a ficha do recebedor, lado a lado.
     Cabia — mas o QR ficava com 9rem numa tela de 375px, que é pequeno
     para a câmera de quem está a meio metro do próprio celular, e a
     coisa mais importante da tela dividia atenção com "Para / Chave /
     Identificador", que é conferência, não ação.

     Agora: chamada, QR grande, valor, ficha embaixo, o copia-e-cola
     dobrado num acordeão e o "Já fiz o Pix" por último. Uma coisa
     depois da outra, na ordem em que se usa. */
  #gaveta-fim .gaveta-fim-titulo { margin-bottom: 0.1rem; font-size: 1.15rem; }
  #gaveta-fim .gaveta-fim-texto { margin-bottom: 0.45rem; font-size: 0.76rem; line-height: 1.3; }

  #gaveta-fim .pix-painel { display: block; }
  #gaveta-fim .pix-chamada { margin: 0 0 0.5rem; font-size: 0.7rem; }
  #gaveta-fim .pix-qr {
    width: min(13.5rem, 62vw);
    margin: 0 auto 0.5rem;
    padding: 0.5rem;
  }
  #gaveta-fim .pix-valor { margin: 0 0 0.6rem; font-size: 1.35rem; }
  #gaveta-fim .pix-ficha {
    margin: 0 0 0.35rem;
    padding: 0.6rem 0.75rem;
    gap: 0.25rem 0.75rem;
    font-size: 0.72rem;
  }
  #gaveta-fim .pix-mais { margin: 0 0 0.5rem; }
  #gaveta-fim .pix-mais-titulo { padding-block: 0.45rem; font-size: 0.72rem; }
  #gaveta-fim .pix-codigo { max-height: 3rem; font-size: 0.58rem; }

  /* O corpo da gaveta é `overflow: hidden` de propósito: fechado, o Pix
     inteiro cabe sem rolagem, e é assim que tem que ser. Só que abrir o
     acordeão acrescenta ~44px — e com hidden esses 44px não rolam, eles
     somem, levando junto o botão de copiar. Então a rolagem liga apenas
     quando a pessoa escolheu expandir. */
  #gaveta-corpo:has(.pix-mais[open]) { overflow-y: auto; }
  #gaveta-fim .pix-copiar { min-height: 44px; }
  #gaveta-fim .pix-feito { min-height: 46px; margin: 0; }
  #gaveta-fim .pix-nota { margin: 0.5rem 0 0; font-size: 0.62rem; }
}

/* Celulares baixos, inclusive com a barra do navegador visível: título e
   explicação cedem espaço antes de qualquer cartão ser cortado. */
@media (max-width: 719px) and (max-height: 700px) {
  .gaveta-topo { padding-block: 0.8rem 0.25rem; }
  .gaveta-sub { display: none; }
  .gaveta-etapas { padding-bottom: 0.25rem; }
  .gaveta-etapas li { min-height: 2rem; }
  .gaveta-passo-cabecalho > p:last-child { display: none; }
  .cota-titulo { -webkit-line-clamp: 1; min-height: 0; }
  .gaveta-pe .botao { min-height: 2.5rem; }
}

@media (max-width: 680px) {
  .faixa-contribuir {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--e2);
    padding: 0.5rem 0.6rem;
  }
  .faixa-contribuir-fotos img { width: 2.2rem; height: 2.2rem; }
  .faixa-contribuir-fotos img:nth-child(n + 3) { display: none; }
  .faixa-contribuir-texto i { display: none; }
  .faixa-contribuir-acao { padding: 0.55rem; font-size: 0; }
  .faixa-contribuir-acao span { font-size: 1.1rem; }
  .musica { bottom: calc(5.3rem + env(safe-area-inset-bottom, 0px)); }
}

/* a música e a faixa são dois controles persistentes; empilhados em vez
   de sobrepostos, continuam legíveis em toda a largura do desktop */
@media (min-width: 681px) {
  body:has(.faixa-contribuir[data-visivel="sim"]) .musica {
    bottom: calc(6.3rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- o zoom do Safari no campo de valor ----------
   Campo com fonte abaixo de 16px faz o iPhone dar zoom sozinho ao focar, e
   o zoom desalinha a gaveta inteira. 16px é o piso exato em que ele não
   mexe — vem por último no arquivo pra vencer as regras de tela estreita,
   que baixavam pra 0.8rem. */
.gaveta input,
.gaveta textarea,
.gaveta select { font-size: max(16px, 1rem); }

/* ============================================================
   COTAS NO CELULAR — 2 por linha, rolando

   A grade era 3x3 espremida numa altura fixa: pra caber tudo sem rolar,
   a foto encolhia, o título ia pra 0.52rem e sobrava "Uma espreguiçadeira
   na..." com reticências. Ilegível, e a piada de cada cota é o texto.

   Duas colunas e rolagem vertical resolvem na origem: o cartão fica com o
   dobro da largura, o título cabe em duas linhas inteiras e o valor volta
   pro tamanho de preço. Rolar é gesto barato; ler adivinhando não é.
   ============================================================ */
@media (max-width: 719px) {
  #gaveta-cotas-bloco {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cotas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 0.6rem;
  }
  .cotas > .cota,
  .cotas > .cota:nth-child(6) { grid-column: auto; }

  .cota {
    grid-template-rows: auto auto auto;
    gap: 0.32rem;
    padding: 0.4rem 0.4rem 0.6rem;
    border-radius: 14px;
  }
  /* a classe é `cota-capa` — escrito como `cota-foto`, nada pegava */
  .cota-capa { aspect-ratio: 4 / 3; height: auto; min-height: 0; overflow: hidden; }
  .cota-capa img { width: 100%; height: 100%; object-fit: cover; }
  .cota-titulo {
    -webkit-line-clamp: 2;
    padding-inline: 0.15rem;
    font-size: 0.86rem;
    line-height: 1.28;
    min-height: 2.56em;   /* duas linhas reservadas: o preço alinha entre os cartões */
  }
  .cota-valor {
    padding-inline: 0.15rem;
    font-size: 1.05rem;
  }

  /* a faixa do botão: era filete + vão + botão alto, três folgas somadas
     numa barra que só carrega um botão */
  .gaveta-painel > .gaveta-pe { padding-block: 0.35rem calc(0.4rem + env(safe-area-inset-bottom)); }
  .gaveta-pe .botao { padding-block: 0.7em; }
}

/* ---------- a folha é FULL e só ela rola ----------
   96dvh deixava uma faixa da lista aparecendo em cima, e o dedo pegava
   nela: a pessoa achava que rolava a gaveta e rolava o fundo. `overflow:
   hidden` no body não segura isso no iPhone — quem segura é
   `overscroll-behavior: contain`, que impede a rolagem de "vazar" pro
   elemento de trás quando chega no fim. */
@media (max-width: 719px) {
  .gaveta-painel {
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
  .gaveta-corpo {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* o bloco das cotas não rola por conta própria: quem rola é o corpo, uma
     barra só — duas áreas roláveis aninhadas é o que trava o dedo no meio */
  #gaveta-cotas-bloco { overflow: visible; }
}

/* ============================================================
   COTAS VIRAM LISTA (celular)

   Em grade, de 2 ou de 3 colunas, o título nunca cabia: "Uma
   espreguiçadeira na praia por um dia" em meia tela vira reticências, e
   a graça de cada cota É a frase. Cortar o texto tira a razão de existir
   do cartão — aumentar a fonte dentro de uma coluna estreita só troca um
   problema por outro.

   Em lista, a frase ganha a largura inteira e aparece completa. A foto
   vira miniatura quadrada à esquerda, que é o suficiente pra ilustrar a
   piada sem disputar espaço com ela. Rola pra ver mais, em ordem
   crescente de valor.
   ============================================================ */
@media (max-width: 719px) {
  .cotas {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 0.5rem;
  }
  .cotas > .cota,
  .cotas > .cota:nth-child(6) { grid-column: auto; }

  .cota {
    grid-template-columns: 4.6rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.15rem 0.85rem;
    padding: 0.5rem 0.7rem 0.5rem 0.5rem;
    border-radius: 14px;
    text-align: left;
  }
  .cota-capa {
    grid-row: span 2;
    aspect-ratio: 1 / 1;
    width: 4.6rem;
    height: auto;
    min-height: 0;
    border-radius: 10px;
    overflow: hidden;
  }
  .cota-capa img { width: 100%; height: 100%; object-fit: cover; }

  /* sem corte: `display: block` desfaz o `-webkit-box` que segurava o
     clamp de 2 linhas — aqui a frase inteira é o ponto */
  .cota-titulo {
    display: block;
    -webkit-line-clamp: unset;
    min-height: 0;
    align-self: end;
    padding-inline: 0;
    font-size: 0.94rem;
    line-height: 1.3;
  }
  .cota-valor {
    align-self: start;
    padding-inline: 0;
    font-size: 1.02rem;
  }
}

/* ---------- a linha cresce com o texto ----------
   O título continuava cortado POR CIMA: desfiz o clamp com `display:
   block`, mas deixei o `overflow: hidden` que vinha junto do
   `-webkit-box`. Caixa curta + overflow escondido = letra decepada.

   E a grade ainda tinha `grid-template-rows: repeat(2, minmax(0, 1fr))`
   da versão de cartões, que reparte a altura disponível em fatias iguais
   em vez de deixar cada linha ter a altura do seu conteúdo. Numa lista
   que rola, quem manda é o conteúdo — a altura vem dele, não da tela. */
@media (max-width: 719px) {
  .cotas {
    grid-template-rows: none;
    grid-auto-rows: min-content;
    align-content: start;
    height: auto;
    min-height: 0;
  }
  .cota {
    grid-template-rows: auto auto;
    align-content: center;
    min-height: 5.4rem;
    height: auto;
    overflow: visible;
  }
  .cota-titulo {
    overflow: visible;
    align-self: end;
    text-overflow: clip;
    white-space: normal;
  }
  .cota-valor { align-self: start; }
  .cota-capa { align-self: center; }
}

/* ---------- o cartão de valor livre não é uma linha da lista ----------
   Ele não tem miniatura: os filhos são a chamada e o campo. Com a grade
   de lista (4.6rem para a foto + resto), a chamada caía na coluna estreita
   da foto e o "R$" na coluna do texto — daí o título espremido em duas
   palavras por linha e o campo fora de lugar. Tocar nele piorava, porque
   o teclado subia sobre um cartão já quebrado.

   Aqui ele volta a ser um bloco de largura inteira, que é o que sempre
   foi: uma pergunta e um valor pra digitar. */
@media (max-width: 719px) {
  .cotas > .cota-livre {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 0.5rem;
    padding: 0.85rem 0.9rem;
    min-height: 0;
  }
  .cota-livre-chamada { gap: 0.22rem; }
  .cota-livre-chamada > span { font-size: 0.58rem; }
  .cota-livre-chamada b { font-size: 1.05rem; line-height: 1.2; }
  /* a explicação cabe agora que a largura é inteira */
  .cota-livre-chamada p { display: block; font-size: 0.8rem; line-height: 1.35; }
  .cota-livre-campo { gap: 0.35rem; padding-bottom: 0.3rem; font-size: 1.05rem; }
  /* 16px é o piso que impede o Safari de dar zoom ao focar */
  .cota-livre-campo input { font-size: max(16px, 1.15rem); }
}