/* ==========================================================================
   Cartão digital · Lia Nails (manicure)
   --------------------------------------------------------------------------
   Modelo de demonstração da Zanbo Studio.
   Para adaptar a um cliente, altere só as variáveis do bloco :root abaixo
   (cores e fontes). O restante do arquivo usa essas variáveis.
   ========================================================================== */

/* Tokens do tema ----------------------------------------------------------- */
:root {
  --cor-fundo: #fbf3f1;
  --cor-cartao: #ffffff;
  --cor-primaria: #c2577a;
  --cor-primaria-escura: #a3405f;
  --cor-texto: #3a2a2f;
  --cor-suave: #7c6a70;
  --fonte-titulo: "Playfair Display", Georgia, serif;
  --fonte-texto: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: radial-gradient(circle at top, #f6d9e0, var(--cor-fundo) 60%);
  font-family: var(--fonte-texto);
  color: var(--cor-texto);
  display: flex;
  justify-content: center;
  padding: 40px 16px;
}

.card {
  width: 100%;
  max-width: 420px;
  background: var(--cor-cartao);
  border-radius: 24px;
  padding: 36px 24px 28px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(120, 50, 70, .12);
}

.avatar {
  width: 110px; height: 110px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--fonte-titulo);
  font-size: 2.2rem; color: #fff;
  background: linear-gradient(135deg, var(--cor-primaria), #e7a1b3);
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(194, 87, 122, .35);
}

h1 { font-family: var(--fonte-titulo); font-size: 2rem; }
.tagline { color: var(--cor-primaria); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin-top: 4px; }
.bio { color: var(--cor-suave); margin: 16px 0 24px; line-height: 1.55; }

.links { display: grid; gap: 12px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1.5px solid #ead3da;
  color: var(--cor-texto);
  text-decoration: none; font-weight: 500;
  transition: transform .15s, background .15s;
}
.btn:hover { transform: translateY(-2px); background: #fdf2f5; }
.btn.primary { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--cor-primaria-escura); }

.services { margin-top: 32px; text-align: left; }
.services h2 { font-family: var(--fonte-titulo); font-size: 1.3rem; text-align: center; margin-bottom: 12px; }
.services ul { list-style: none; }
.services li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #ecdde1; }
.services strong { color: var(--cor-primaria-escura); white-space: nowrap; }

footer { margin-top: 24px; color: var(--cor-suave); font-size: .85rem; line-height: 1.6; }