/* Perfil: capa, foto, frase do dia e foco da semana. */

/* bolinha com a foto (topo e perfil) */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%; background: var(--suave); color: var(--tinta);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--destaque), 0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-iniciais { font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; }
.botao-perfil { text-decoration: none; display: inline-flex; border-radius: 50%; transition: transform 0.3s cubic-bezier(.3, 1.6, .5, 1); }
.botao-perfil:hover { transform: translateY(-2px) rotate(-6deg) scale(1.06); }
.botao-perfil:focus-visible { outline: 3px solid #6E8BFF; outline-offset: 4px; }
.botao-perfil.ativo .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tinta), 0 6px 14px -6px rgba(0, 0, 0, 0.5); }

.perfil { display: flex; flex-direction: column; gap: 26px; }
.cartao-capa { padding: 0 !important; overflow: hidden; }
.capa-perfil { position: relative; height: 210px; background-color: var(--suave); }
.capa-perfil img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trocar-capa { position: absolute; right: 14px; top: 14px; min-height: 38px; font-size: 13px; background: rgba(255, 255, 255, 0.92); }

.capa-estetica { background-color: var(--suave); background-image: radial-gradient(rgba(255, 255, 255, 0.7) 2px, transparent 2.6px), linear-gradient(135deg, var(--suave), var(--destaque)); background-size: 22px 22px, 100% 100%; }
.capa-rosas { background: radial-gradient(circle at 20% 30%, #FFC9D9 0 18%, transparent 19%), radial-gradient(circle at 70% 60%, #F7A6BF 0 14%, transparent 15%), radial-gradient(circle at 45% 85%, #FFE0E9 0 12%, transparent 13%), radial-gradient(circle at 88% 20%, #FFD5E1 0 10%, transparent 11%), linear-gradient(135deg, #F48FB1, #FCE4EC); }
.capa-ceu { background: radial-gradient(ellipse 18% 9% at 22% 35%, #fff 60%, transparent 62%), radial-gradient(ellipse 14% 7% at 30% 31%, #fff 60%, transparent 62%), radial-gradient(ellipse 20% 9% at 72% 62%, #fff 60%, transparent 62%), radial-gradient(ellipse 13% 7% at 80% 57%, #fff 60%, transparent 62%), linear-gradient(180deg, #8EC5F2, #DCEFFF); }
.capa-por-do-sol { background: radial-gradient(circle at 50% 105%, #FFE08A 0 22%, transparent 23%), linear-gradient(180deg, #7B6CC9 0%, #E57FA8 50%, #FFB48A 100%); }
.capa-lavanda { background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 26px), linear-gradient(135deg, #C8B6F2, #F1E9FF); }
.capa-xadrez { background-color: #F9E7EE; background-image: linear-gradient(90deg, rgba(232, 121, 158, 0.35) 50%, transparent 50%), linear-gradient(rgba(232, 121, 158, 0.35) 50%, transparent 50%); background-size: 36px 36px; }
.capa-bolinhas { background-color: #FFF4D6; background-image: radial-gradient(#F2A7BD 5px, transparent 5.6px), radial-gradient(#9FC9E8 5px, transparent 5.6px); background-size: 40px 40px; background-position: 0 0, 20px 20px; }
.capa-listras { background: repeating-linear-gradient(90deg, #FDE2EA 0 26px, #FFFFFF 26px 52px, #E3F0FB 52px 78px, #FFFFFF 78px 104px); }

.perfil-cabeca { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 20px; padding: 0 28px 24px; position: relative; }
.avatar-grande-palco { margin-top: -66px; }
.perfil-nome { padding-top: 14px; }
.tirar-foto { margin-top: 14px; }
.avatar-grande-palco { position: relative; cursor: pointer; border-radius: 50%; }
.avatar-grande-palco:focus-within { outline: 3px solid #6E8BFF; outline-offset: 6px; }
.avatar-grande { width: 132px; height: 132px; box-shadow: 0 0 0 6px var(--cartao), 0 0 0 9px var(--destaque), 0 14px 28px -12px rgba(0, 0, 0, 0.6); }
.avatar-grande .avatar-iniciais { font-size: 46px; }
.trocar-foto {
  position: absolute; right: 2px; bottom: 6px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--destaque); color: #fff;
  box-shadow: 0 0 0 3px var(--cartao), 0 4px 10px rgba(0, 0, 0, 0.3); font-weight: 800;
}
.avatar-grande-palco:hover .trocar-foto { transform: rotate(-10deg) scale(1.08); }
.perfil-nome { flex: 1 1 220px; padding-bottom: 6px; min-width: 0; }
.perfil-nome h1 { margin: 0; font-family: var(--fonte-titulo); font-size: 34px; line-height: 1.1; overflow-wrap: anywhere; }
.perfil-nome p { margin: 2px 0 0; }
.tirar-foto { min-height: 36px; font-size: 13px; }

.efeitos-ativos .perfil.chegando .avatar-grande { animation: avatar-pula 0.9s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes avatar-pula { from { transform: scale(0.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.efeitos-ativos .perfil.chegando .capa-perfil { animation: capa-desce 0.7s ease both; }
@keyframes capa-desce { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

.seletor-capas .capas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.opcao-capa { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 14px; border: 2.5px solid transparent; background: transparent; font-weight: 800; font-size: 13px; color: var(--tinta); cursor: pointer; text-align: center; }
.opcao-capa[aria-pressed="true"] { border-color: var(--destaque); background: #fff; }
.opcao-capa:focus-within { outline: 3px solid #6E8BFF; }
.amostra-capa { display: flex; align-items: center; justify-content: center; height: 60px; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08); }
.amostra-sua-foto { border: 2.5px dashed var(--destaque); color: var(--destaque); background: #fff; box-shadow: none; }

.grade-perfil { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; align-items: start; }
.coluna-perfil { display: flex; flex-direction: column; gap: 26px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plano-teste { background: #FFF1A8; }
.plano-mensal, .plano-anual { background: #CFEFD8; }
.plano-suspenso { background: #F6C9C4; }

@media (max-width: 640px) {
  .capa-perfil { height: 150px; }
  .perfil-cabeca { padding: 0 18px 20px; }
  .avatar-grande-palco { margin-top: -56px; }
  .perfil-nome { padding-top: 0; }
  .avatar-grande { width: 112px; height: 112px; }
  .perfil-nome h1 { font-size: 28px; }
  .botao-perfil .avatar { width: 40px; height: 40px; }
}

/* ---------- Hoje: frase do dia e foco da semana ---------- */
.frase-do-dia { margin: 4px 0 0; font-size: 30px; line-height: 1.15; text-align: center; color: var(--tinta); padding: 6px 10px; }
.frase-do-dia .aspas { font-family: var(--fonte-titulo); color: var(--destaque); font-size: 1.4em; line-height: 0; vertical-align: -0.35em; margin: 0 4px; }
.efeitos-ativos .frase-do-dia.trocando { animation: frase-vira 0.6s ease; }
@keyframes frase-vira { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.meta-hoje { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--clara); color: var(--tinta); text-decoration: none; margin-bottom: 10px; transition: transform 0.25s ease; }
.meta-hoje:hover { transform: translateY(-2px) rotate(-0.6deg); }
.meta-hoje-topo { display: flex; justify-content: space-between; gap: 10px; }
.meta-hoje .barra { background: rgba(255, 255, 255, 0.7); }
.meta-hoje .barra, .meta-hoje .barra-cheia { display: block; }