/* Telas largas: o cartão continua estreito e vertical, centralizado. Nenhum elemento é reorganizado. */
@media (min-width:480px){.card{border-radius:14px;margin:16px 0;box-shadow:0 8px 30px rgba(0,0,0,.55)}.screen{min-height:calc(100svh - 32px)}}

@media (prefers-reduced-motion:no-preference){
  /* Seta: sobe e desce suavemente e as três setas acendem em cascata, chamando para rolar. */
  .chev svg{animation:bob 1.8s ease-in-out infinite}
  .chev path{animation:cascade 1.8s ease-in-out infinite;opacity:.25}
  .chev path:nth-child(2){animation-delay:.18s}
  .chev path:nth-child(3){animation-delay:.36s}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(2.2cqw)}}
  @keyframes cascade{0%,100%{opacity:.25}40%,60%{opacity:1}}
  html{scroll-behavior:smooth}
  .card{animation:in .5s ease-out both}
  @keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* Navegadores sem container queries (cqw): medidas proporcionais a 360px de largura. */
@supports not (width:1cqw){
  .id{margin-top:-68px}.name{font-size:56px}.role{font-size:10px;margin-top:20px}
  .wa{width:295px;min-height:43px;font-size:12px;margin-top:20px}
  .bloco{height:142px}.blocks{gap:42px;padding:0 25px}
  .chev svg{width:19px;height:37px}
}