/* ======= Fontes locais (coloque os arquivos na pasta /fonts) ======= */
@font-face {
  font-family: "Archia";
  src: url("fonts/archia-regular-webfont.ttf") format("truetype"),
       url("fonts/Archia-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend Local";
  src: url("fonts/Lexend-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ======= Tema ======= */
:root {
  --accent: #a6ce38;  /* Nome e Ícones (atualizado) */
  --text:   #FFFFFF;  /* Cargo e Contatos */
}

/* ======= Layout da página ======= */
* { box-sizing: border-box; }
body {
  margin: 40px;
  background: #ffffff;
  color: #222;
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.4;
}
.container { max-width: 1400px; margin: 0 auto; padding: 16px; }
h1 { margin: 0 0 8px; font-size: 1.6rem; }
.desc { margin: 0 0 16px; color: #555; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 1400px) { .grid { grid-template-columns: 1fr; } }
.card { border: 1px solid #e5e5e5; border-radius: 8px; padding: 12px; background: #fff; }

.field { margin-bottom: 2px; }
label { display: inline-block; margin-bottom: 2px; }
input[type="text"], input[type="file"] { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.help { color: #666; font-size: 12px; }
.checkbox { display: flex; align-items: center; gap: 8px; margin: 6px 0; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
button { padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; background: #f5f5f5; cursor: pointer; }
button:focus { outline: 2px solid #4c9aff; outline-offset: 2px; }

.preview-wrapper { padding: 12px; border: 1px dashed #ccc; border-radius: 8px; background: #fafafa; overflow: auto; }
.assinatura { display: inline-block; }
.preview-foto img { max-width: 160px; max-height: 160px; border-radius: 5%; display: none; }

.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ======= Canvas da assinatura (BG 800×400) ======= */
.sig-canvas { position: relative; width: 800px; height: 400px; }

/* BG por cima (z=2), foto por baixo (z=1) */
.bg-layer {
  position: absolute; left: 0; top: 0; width: 800px; height: 400px; z-index: 2; display: block;
}
.photo-layer {
  position: absolute; z-index: 1; display: block;
  /* Recorte do BG: x=51, y=53, w=241, h=240 */
  left: 51px; top: 53px; width: 241px; height: 240px;
  object-fit: cover;
}

/* Bloco de textos: alinhado à linha do BG */
.overlay-area {
  position: absolute; z-index: 3;
  left: 390px;  /* início da “linha” do BG */
  top: 120px;
  width: 320px; color: var(--text);
}

/* Tipografia PRÉVIA/PNG */
.font-name {
  font-family: "Lexend Local", "Lexend", Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: var(--accent);
  font-size: 30px;
  line-height: 1.1;
}
.font-role {
  font-family: "Archia", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  color: var(--text);
  letter-spacing: .08em;
  font-size: 20px;
  margin-top: 4px;
}

/* ===== Contatos: coluna fixa para ícone + texto alinhado ===== */
.contacts {
  margin-top: 70px;
  display: grid;
  gap: 12px;
}

.contact-line {
  display: grid;
  grid-template-columns: 26px 1fr;  /* largura fixa = maior ícone (web) */
  column-gap: 12px;
  align-items: center;
}

/* tamanho padrão de ícones na PRÉVIA */
.contact-line svg.icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* aumenta somente o ícone WEB na PRÉVIA */
.contact-line svg.icon-web {
  width: 26px;
  height: 26px;
  display: block;
}

.contact-line a,
.contact-line span {
  display: block;
  font-family: "Archia", Arial, Helvetica, sans-serif;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}