/* Estrutura do cartão: coluna estreita e vertical. Todas as medidas em cqw (largura do cartão),
   para o cartão ser idêntico em Android e iPhone, apenas escalando. */
.card{
  position:relative;width:100%;max-width:430px;background:var(--bg);overflow:hidden;
  container-type:inline-size;padding-bottom:10cqw;
}

/* Primeira tela: ocupa toda a altura visível. Foto cresce; nome, botão e seta ficam SEMPRE na base da tela. */
.screen{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-bottom:calc(3cqw + env(safe-area-inset-bottom,0px))}
.hero{position:relative;width:100%;flex:1 1 auto;min-height:90cqw;background:#c9b79a}
.hero img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
/* Transição foto → fundo escuro: longa e suave; já está escura onde começa o nome (legível mesmo sobre roupa clara). */
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:46cqw;background:linear-gradient(to bottom,rgba(10,17,14,0) 0%,rgba(10,17,14,.35) 34%,rgba(10,17,14,.82) 62%,#0a110e 88%)}

.id{position:relative;margin-top:-19cqw;text-align:center;padding:0 6cqw}
.status{margin:3cqw 6cqw 0;text-align:center;font-size:3cqw;line-height:1.4;color:var(--text-soft)}
.status:empty{margin:0}
.blocks{margin:0;scroll-margin-top:0;padding-top:8cqw;padding-left:7cqw;padding-right:7cqw;display:flex;flex-direction:column;gap:11.7cqw}