/* ==========================================================
   MODELO · CARTÃO DE VISITA DIGITAL
   Cada cartão define cores e fontes no <style> do HTML (variáveis --c-...).
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--c-fundo); color: var(--c-texto);
  font-family: var(--c-fonte-texto); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.ic { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.c-cartao {
  position: relative; max-width: 440px; margin: 0 auto; min-height: 100vh;
  background: var(--c-bg); overflow: hidden;
}

/* Capa e perfil */
.c-capa { height: 150px; background: var(--c-capa); position: relative; }
.c-capa::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--c-capa-padrao, radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.6px));
  background-size: 18px 18px; opacity: .6;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
          mask-image: linear-gradient(180deg, #000, transparent);
}
.c-perfil { position: relative; padding: 0 24px; text-align: center; margin-top: -58px; }
.c-avatar {
  width: 116px; height: 116px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-avatar-bg, var(--c-acento)); color: var(--c-avatar-texto, var(--c-acento-tinta));
  border: 5px solid var(--c-bg); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35);
  font-family: var(--c-fonte-titulo); font-size: 52px; font-weight: 700; line-height: 1;
}
.c-avatar .ic { width: 52px; height: 52px; stroke-width: 1.7; }
.c-perfil h1 { font-family: var(--c-fonte-titulo); font-size: 32px; font-weight: var(--c-peso-titulo, 700); line-height: 1.1; letter-spacing: -.02em; }
.c-cargo { margin-top: 6px; color: var(--c-acento-texto, var(--c-acento)); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.c-bio { margin: 12px auto 0; color: var(--c-suave); font-size: 15.5px; max-width: 30em; }

/* Ações */
.c-acoes { padding: 24px 20px 6px; }
.c-btn-principal {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; border-radius: var(--c-raio-btn, 16px);
  background: var(--c-acento); color: var(--c-acento-tinta);
  font-weight: 800; font-size: 17px; box-shadow: 0 12px 26px -12px var(--c-sombra-acento, rgba(0, 0, 0, .4));
}
.c-btn-principal .ic { width: 22px; height: 22px; }
.c-atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.c-atalhos a, .c-atalhos button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px 12px; border-radius: 16px;
  background: var(--c-superficie); border: 1px solid var(--c-linha);
  font: 700 13px/1.2 var(--c-fonte-texto); color: var(--c-texto); text-align: center; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.c-atalhos a:active, .c-atalhos button:active { transform: scale(.97); }
.c-atalho-ic {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-icone-bg); color: var(--c-icone-cor);
}
.c-atalho-ic .ic { width: 20px; height: 20px; }

/* Blocos de informação */
.c-bloco { margin: 14px 20px 0; padding: 20px; border-radius: 18px; background: var(--c-superficie); border: 1px solid var(--c-linha); }
.c-bloco h2 { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-acento-texto, var(--c-acento)); margin-bottom: 10px; }
.c-lista li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--c-linha-forte); font-size: 15.5px; }
.c-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.c-lista b { white-space: nowrap; font-weight: 800; }
.c-checks li { display: flex; gap: 10px; padding: 6px 0; font-size: 15.5px; }
.c-checks .ic { color: var(--c-acento-texto, var(--c-acento)); margin-top: 2px; stroke-width: 2.6; }
.c-endereco { font-size: 15.5px; }
.c-endereco small { display: block; color: var(--c-suave); font-size: 14px; margin-top: 2px; }

.c-rodape { padding: 26px 20px 34px; text-align: center; font-size: 13px; color: var(--c-suave); }
.c-rodape a { font-weight: 800; color: var(--c-texto); }

/* No computador o cartão fica centralizado, como um celular */
@media (min-width: 520px) {
  body { padding: 40px 16px; }
  .c-cartao { min-height: 0; border-radius: 28px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .45); }
}
html.captura body { padding: 0; }
html.captura .c-cartao { border-radius: 0; box-shadow: none; min-height: 100vh; }