/* ============ Base mobile-first ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0f1115;
  --card: #1a1d24;
  --card2: #242832;
  --text: #f5f6fa;
  --muted: #9aa0ac;
  --accent: #7c3aed;
  --border: #2c303a;
  --radius: 16px;
}
html, body { height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Container central no formato de celular */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 40px;
}

/* ============ Tipografia / utilidades ============ */
h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
h2 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.muted { color: var(--muted); font-size: 14px; }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }

/* ============ Logo ============ */
.brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.brand .logo {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: grid; place-items: center; font-size: 22px;
}
.brand .name { font-size: 22px; font-weight: 800; }

/* Logo em imagem (fundo transparente) */
.brand-logo {
  height: 60px; width: auto; display: block;
}
.brand-logo.big { height: 180px; }

/* ============ Inputs ============ */
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
input, select, textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 13px 14px;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 70px; }

/* ============ Botoes ============ */
.btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  transition: transform .08s, opacity .15s;
}
.btn:active { transform: scale(.98); }
.btn.secondary { background: var(--card2); color: var(--text); }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn.small { width: auto; padding: 8px 14px; font-size: 13px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

/* ============ Cartao do editor ============ */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 16px;
}

/* Foto upload */
.photo-pick { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.avatar {
  width: 110px; height: 110px;
  background: var(--card2);
  display: grid; place-items: center;
  overflow: hidden;
  border: 2px solid var(--border);
  font-size: 34px; color: var(--muted);
}
.avatar.circle { border-radius: 50%; }
.avatar.rounded { border-radius: 22px; }
.avatar.square { border-radius: 6px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Seletor de tema */
.themes { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-dot {
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  border: 3px solid transparent;
}
.theme-dot.active { border-color: #fff; }

/* Lista de links no editor */
.link-item {
  display: flex; gap: 8px; align-items: center;
  background: var(--card2);
  border-radius: 12px; padding: 10px; margin-top: 10px;
}
.link-item select { flex: 0 0 130px; }
.link-item input { flex: 1; }
.link-item .del {
  flex: 0 0 auto; background: transparent; border: none; color: #ff6b6b;
  font-size: 20px; cursor: pointer; padding: 4px 8px;
}

/* ============ Pagina publica do cartao ============ */
.pub {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 20px;
}
.pub .pavatar {
  width: 130px; height: 130px; overflow: hidden;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.pub .pavatar.circle { border-radius: 50%; }
.pub .pavatar.rounded { border-radius: 28px; }
.pub .pavatar.square { border-radius: 8px; }
.pub .pavatar img { width: 100%; height: 100%; object-fit: cover; }
.pub .pavatar .ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 40px; }
.pub .pname { font-size: 26px; font-weight: 800; margin-top: 18px; text-align: center; }
.pub .ptitle { font-size: 15px; opacity: .85; margin-top: 4px; text-align: center; }
.pub .pbio { font-size: 14px; opacity: .8; margin-top: 12px; text-align: center; max-width: 360px; }
.pub .plinks { width: 100%; max-width: 380px; margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.pub .plink {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-radius: 14px;
  background: rgba(255,255,255,.12);
  color: inherit; text-decoration: none;
  font-weight: 600; font-size: 15px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  transition: transform .1s, background .15s;
}
.pub .plink:active { transform: scale(.98); }
.pub .plink .ic { font-size: 20px; }
.pub .foot { margin-top: auto; padding-top: 30px; font-size: 12px; opacity: .55; }

/* ============ Modal QR ============ */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal-bg.show { display: flex; }
.modal {
  background: #fff; color: #111; border-radius: 20px; padding: 26px;
  max-width: 360px; width: 100%; text-align: center;
}
.modal #qrcode { display: flex; justify-content: center; margin: 16px 0; }
.modal #qrcode canvas, .modal #qrcode img { border-radius: 10px; }
.modal .lnk { font-size: 13px; color: #555; word-break: break-all; }

/* ============ Toast ============ */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #111; color: #fff; padding: 12px 20px; border-radius: 30px;
  font-size: 14px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 60;
  border: 1px solid var(--border);
}
.toast.show { opacity: 1; }

/* ============ Temas (fundo da pagina publica) ============ */
.t-dark { background: #0f1115; color: #f5f6fa; }
.t-light { background: #f4f5f7; color: #15171c; }
.t-gradient-roxo { background: linear-gradient(160deg, #6d28d9, #db2777); color: #fff; }
.t-gradient-azul { background: linear-gradient(160deg, #0ea5e9, #2563eb); color: #fff; }
.t-gradient-verde { background: linear-gradient(160deg, #059669, #10b981); color: #fff; }
.t-gradient-sunset { background: linear-gradient(160deg, #f59e0b, #ef4444); color: #fff; }
.t-light .plink { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.08); }

/* ============ Molduras da foto (frames) ============ */
.avatar.fr-thin,  .pub .pavatar.fr-thin  { border: 2px solid rgba(255,255,255,.45); }
.avatar.fr-ring,  .pub .pavatar.fr-ring  { border: 4px solid var(--accent); }
.avatar.fr-white, .pub .pavatar.fr-white { border: 4px solid #fff; box-shadow: 0 6px 22px rgba(0,0,0,.3); }
.avatar.fr-soft,  .pub .pavatar.fr-soft  { border: none; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.avatar.fr-none,  .pub .pavatar.fr-none  { border: none; }
.t-light .pavatar.fr-thin { border-color: rgba(0,0,0,.15); }

/* ============ Wizard (primeiro acesso) ============ */
.wiz-top { display: flex; gap: 7px; justify-content: center; margin: 18px 0 6px; }
.wiz-top .dot { width: 30px; height: 5px; border-radius: 3px; background: var(--border); transition: background .2s; }
.wiz-top .dot.on { background: var(--accent); }
.wiz-counter { text-align: center; font-size: 12px; color: var(--muted); }
.step { display: none; }
.step.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.step h1 { font-size: 22px; margin-bottom: 4px; }
.step .sub { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.wiz-nav { display: flex; gap: 10px; margin-top: 24px; }
.wiz-nav .btn { flex: 1; }

/* Grade de layouts */
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.layout-card { border: 2px solid var(--border); border-radius: 14px; padding: 8px; cursor: pointer; transition: border-color .15s; }
.layout-card.active { border-color: #fff; }
.lp { height: 120px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.lp .lp-av { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.9); border: 2px solid rgba(255,255,255,.6); }
.lp .lp-bar { width: 72%; height: 9px; border-radius: 5px; background: rgba(255,255,255,.6); }
.lp .lp-bar.s { width: 48%; height: 7px; opacity: .8; }
.t-light .lp-av { background: #15171c; border-color: rgba(0,0,0,.15); }
.t-light .lp-bar { background: rgba(0,0,0,.25); }
.layout-name { text-align: center; font-size: 12.5px; font-weight: 600; margin-top: 7px; }

/* Grade de molduras */
.frame-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.frame-opt { border: 2px solid var(--border); border-radius: 14px; padding: 12px 4px 10px; text-align: center; cursor: pointer; transition: border-color .15s; }
.frame-opt.active { border-color: var(--accent); }
.frame-opt .avatar { width: 60px; height: 60px; font-size: 22px; margin: 0 auto 8px; }
.frame-opt small { font-size: 10.5px; color: var(--muted); display: block; }

/* Resultado / preview com iframe */
.result-frame { width: 100%; height: 60vh; min-height: 420px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); }

/* ============ Painel (dashboard) ============ */
.dash-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-top: 16px; }
.dash-del {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.25);
  font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(4px);
}
.dash-del:hover { background: #e03131; border-color: #e03131; }
.dash-head { display: flex; align-items: center; gap: 14px; padding: 18px 16px; }
.dash-head .avatar { width: 60px; height: 60px; font-size: 24px; }
.dash-head .dh-txt .nm { font-weight: 800; font-size: 17px; }
.dash-head .dh-txt .tt { font-size: 13px; opacity: .85; }
.dash-link { font-size: 12px; color: var(--muted); padding: 0 16px 12px; word-break: break-all; }
.dash-actions { display: flex; gap: 10px; padding: 0 14px 16px; }
.dash-actions .btn { flex: 1; }

/* ============ Pagina publica com template (full screen) ============ */
.screen { max-width: 480px; margin: 0 auto; }

/* ============ LAYOUT 2 (azul corporativo) ============ */
.tpl2 {
  position: relative;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  font-family: var(--font);
}
.phone .tpl2 { min-height: 100%; }
.tpl2-cover { height: 220px; background: #e8edf2; }
.tpl2-photo {
  position: absolute;
  top: 118px; left: 50%;
  transform: translateX(-50%);
  width: 156px; height: 156px;
  border-radius: 50%;
  border: 5px solid var(--frame);
  overflow: hidden;
  background: #ccd3dc;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  z-index: 3;
}
.tpl2-photo img { width: 100%; height: 100%; object-fit: cover; }
.tpl2-photo .tpl2-ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 44px; color: #fff; }
.tpl2-body {
  flex: 1;
  background: var(--bg);
  border-top-left-radius: 44px;
  border-top-right-radius: 44px;
  margin-top: -44px;
  padding: 122px 22px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tpl2-name {
  color: #fff;
  font-family: var(--font);
  font-size: 30px; font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
}
.tpl2-title {
  color: rgba(255,255,255,.7);
  font-family: "Montserrat", sans-serif;
  letter-spacing: 5px;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 8px;
  text-align: center;
}
.tpl2-icons.icon { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
.tpl2-icons.icon .tpl2-badge {
  width: 74px; height: 74px; border-radius: 50%;
  background: #fff; color: var(--bg);
  display: grid; place-items: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .1s;
}
.tpl2-icons.icon .tpl2-badge:active { transform: scale(.94); }
.tpl2-icons.icon-text { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 330px; margin-top: 26px; }
.tpl2-row {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 14px;
  padding: 11px 16px;
  color: #fff; text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 14px;
}
.tpl2-row .tpl2-badge {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--bg);
  display: grid; place-items: center; flex: 0 0 auto;
}
.tpl2-footer {
  margin-top: auto;
  margin-bottom: 4px;
  color: rgba(255,255,255,.75);
  font-family: "Montserrat", sans-serif;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 30px;
  padding: 9px 18px;
}

/* ============ "Celular" do preview no editor ============ */
/* box-sizing content-box: a largura/altura abaixo e' a AREA INTERNA exata,
   a borda fica por fora. Assim o conteudo escalado preenche sem cortar nem sobrar. */
.phone {
  box-sizing: content-box;
  width: 264px; height: 542px;
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden;
  border: 9px solid #0a0a0a;
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  background: #000;
}
/* Renderiza no tamanho real (390x800) e reduz: 390*0.68=265, 800*0.68=544 (cabe nos 264x542) */
.phone-scroll {
  width: 390px; height: 800px;
  transform: scale(0.68);
  transform-origin: top left;
  overflow: hidden;
}

/* ============ Controles do editor de layout ============ */
.seg { display: flex; gap: 8px; }
.seg .seg-btn {
  flex: 1; padding: 11px; border-radius: 12px; cursor: pointer; text-align: center;
  background: var(--card2); border: 2px solid transparent; color: var(--text); font-size: 14px;
}
.seg .seg-btn.active { border-color: var(--accent); }
.color-row { display: flex; align-items: center; gap: 12px; }
.color-row input[type=color] {
  width: 52px; height: 40px; padding: 0; border: 1px solid var(--border);
  border-radius: 10px; background: none; cursor: pointer;
}
.font-opt { font-size: 20px; padding: 12px; }
.font-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.font-grid .seg-btn { font-size: 16px; padding: 12px 6px; }
.font-playfair { font-family: "Playfair Display", serif; }
.font-cinzel { font-family: "Cinzel", serif; }
.font-ebgaramond { font-family: "EB Garamond", serif; }

/* ============ Base comum dos templates ============ */
.tpl { min-height: 100vh; display: flex; flex-direction: column; position: relative; }
.phone .tpl { min-height: 100%; }
.ph-emoji { width: 100%; height: 100%; display: grid; place-items: center; font-size: 42px; color: #fff; }
.tpl a { -webkit-tap-highlight-color: transparent; }

/* ---------- LAYOUT 1 — Carla Dias (creme/capa) ---------- */
.tpl1 { background: #f3ece2; color: #4a4239; }
.tpl1-cover { height: 185px; background: #e3d8c6; }
.tpl1-avatar { position: absolute; top: 108px; left: 50%; transform: translateX(-50%); width: 140px; height: 140px; border-radius: 50%; border: 4px solid #c9b58f; overflow: hidden; background: #d8cdbb; box-shadow: 0 8px 22px rgba(0,0,0,.2); z-index: 3; }
.tpl1-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tpl1-body { flex: 1; padding: 92px 26px 30px; display: flex; flex-direction: column; align-items: center; }
.tpl1-name { font-family: var(--font); font-size: 30px; font-weight: 700; color: #4a4239; text-align: center; }
.tpl1-title { font-family: "Montserrat", sans-serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #9c8e79; margin-top: 6px; }
.tpl1-links { width: 100%; max-width: 340px; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.tpl1-btn { display: flex; align-items: center; gap: 14px; background: #bcab90; color: #fff; text-decoration: none; padding: 15px 18px; border-radius: 14px; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.tpl1-ic { display: grid; place-items: center; } .tpl1-ic svg { width: 20px; height: 20px; }

/* ---------- LAYOUT 3 — Raquel (verde) ---------- */
.tpl3 { background: #efeee6; color: #3a4a36; }
.tpl3-top { background: #5d7150; padding: 36px 24px 60px; text-align: center; border-bottom-left-radius: 42px; border-bottom-right-radius: 42px; }
.tpl3-avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #fff; overflow: hidden; margin: 0 auto; background: #cdd6c4; }
.tpl3-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tpl3-name { font-family: var(--font); color: #fff; font-size: 23px; letter-spacing: 2px; text-transform: uppercase; margin-top: 16px; }
.tpl3-title { font-family: "Montserrat", sans-serif; color: rgba(255,255,255,.82); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-top: 6px; }
.tpl3-body { flex: 1; padding: 34px 26px; display: flex; flex-direction: column; justify-content: center; }
.tpl3-links { display: flex; flex-direction: column; gap: 16px; }
.tpl3-btn { display: flex; align-items: center; justify-content: center; gap: 12px; background: #6f8560; color: #fff; text-decoration: none; padding: 16px; border-radius: 30px; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 14px; }
.tpl3-ic svg { width: 20px; height: 20px; }

/* ---------- LAYOUT 4 — Advocacia (grafite/dourado) ---------- */
.tpl4 { background: #ffffff; color: #2b2b2b; }
.tpl4-top { background: #333133; padding: 38px 24px 64px; text-align: center; border-bottom-left-radius: 46px; border-bottom-right-radius: 46px; }
.tpl4-avatar { width: 120px; height: 120px; border-radius: 50%; border: 3px solid #c8a24a; overflow: hidden; margin: 0 auto; background: #555; }
.tpl4-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tpl4-name { font-family: var(--font); color: #fff; font-size: 26px; font-weight: 700; margin-top: 16px; }
.tpl4-title { font-family: "Montserrat", sans-serif; color: #c8a24a; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; margin-top: 6px; }
.tpl4-body { flex: 1; padding: 34px 26px; display: flex; flex-direction: column; justify-content: center; }
.tpl4-links { display: flex; flex-direction: column; gap: 16px; }
.tpl4-btn { position: relative; display: flex; align-items: center; justify-content: center; background: #333133; color: #fff; text-decoration: none; padding: 16px; border-radius: 30px; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.tpl4-ic { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: #c8a24a; color: #333; display: grid; place-items: center; }
.tpl4-ic svg { width: 18px; height: 18px; }

/* ---------- LAYOUT 5 — Mariana (rosa) ---------- */
.tpl5 { background: #e7c4bd; color: #5a4a47; align-items: center; padding: 46px 26px 34px; }
.tpl5-avatar { width: 128px; height: 128px; border-radius: 50%; border: 5px solid #d9a9a0; overflow: hidden; background: #e9d3ce; }
.tpl5-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tpl5-name { font-family: var(--font); font-size: 40px; font-weight: 700; color: #4a3b38; margin-top: 16px; line-height: 1; }
.tpl5-title { font-family: "Montserrat", sans-serif; font-size: 12px; color: #7a6a66; margin-top: 4px; }
.tpl5-links { width: 100%; max-width: 320px; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.tpl5-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #d9a9a0; color: #4a3b38; text-decoration: none; padding: 14px; border-radius: 8px; border: 1px solid #c89a91; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 15px; }
.tpl5-ic svg { width: 18px; height: 18px; }

/* ---------- LAYOUT 6 — Carla Rodrigues (escuro/dourado) ---------- */
.tpl6 { background: linear-gradient(160deg, #211e1a, #2c2823 55%, #14110d); color: #e8d9b8; align-items: center; padding: 46px 26px 34px; }
.tpl6-avatar { width: 122px; height: 122px; border-radius: 50%; border: 3px solid #c9a24a; overflow: hidden; background: #3a342c; }
.tpl6-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tpl6-name { font-family: var(--font); font-size: 44px; color: #d8b25a; margin-top: 14px; line-height: 1; }
.tpl6-title { font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: #b9a878; margin-top: 8px; }
.tpl6-links { width: 100%; max-width: 320px; margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.tpl6-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: transparent; color: #e6d6ac; text-decoration: none; padding: 14px; border: 1px solid #b8923f; border-radius: 4px; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 17px; letter-spacing: 2px; text-transform: uppercase; }
.tpl6-ic svg { width: 18px; height: 18px; }

/* ---------- LAYOUT 7 — Juliana (editorial branco) ---------- */
.tpl7 { background: #f4f1ec; color: #2b2b2b; }
.tpl7-cover { height: 150px; background: #d8d2c8; }
.tpl7-avatar { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); width: 128px; height: 128px; border-radius: 50%; border: 5px solid #f4f1ec; overflow: hidden; background: #cfc8bd; box-shadow: 0 6px 18px rgba(0,0,0,.18); z-index: 3; }
.tpl7-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tpl7-body { flex: 1; padding: 78px 30px 30px; display: flex; flex-direction: column; align-items: center; }
.tpl7-name { font-family: var(--font); font-size: 42px; color: #2b2b2b; }
.tpl7-title { font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #7a756c; margin-top: 4px; }
.tpl7-links { width: 100%; max-width: 330px; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.tpl7-btn { text-align: center; background: transparent; color: #2b2b2b; text-decoration: none; padding: 13px; border: 1px solid #b9b2a6; border-radius: 10px; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.tpl7-foot { margin-top: 26px; text-align: center; font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: 2px; color: #7a756c; }
.tpl7-icons { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
.tpl7-fic { color: #2b2b2b; } .tpl7-fic svg { width: 18px; height: 18px; }

/* ---------- LAYOUT 8 — Ana Morais (preto/dourado luxo) ---------- */
.tpl8 { color: #e9cd83; align-items: center; padding: 42px 26px 30px; background-color: #0c0c0c; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 14px, transparent 14px 28px); }
.tpl8-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #d4af37; overflow: hidden; background: #222; box-shadow: 0 0 0 4px rgba(212,175,55,.25); }
.tpl8-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tpl8-name { font-family: var(--font); font-weight: 700; font-size: 30px; color: #e3c468; letter-spacing: 2px; text-transform: uppercase; margin-top: 18px; text-align: center; }
.tpl8-title { font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: #bfa45f; margin-top: 8px; }
.tpl8-links { width: 100%; max-width: 320px; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.tpl8-btn { text-align: center; background: linear-gradient(180deg, #f3d98b, #caa53d); color: #3a2e10; text-decoration: none; padding: 14px; border-radius: 6px; font-family: "Cinzel", serif; font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.tpl8-ic svg { width: 18px; height: 18px; }
.tpl8-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 20px; }
.tpl8-crown { color: #d4af37; font-size: 22px; }
.tpl8 .tpl-footer { margin-top: 0; margin-bottom: 0; }

/* ============ Balao de rodape (todos os layouts) ============ */
.tpl-footer {
  margin-top: auto;
  align-self: center;
  margin-bottom: 22px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  border-radius: 30px; padding: 9px 18px;
  border: 1px solid currentColor; opacity: .75;
}
.tpl1 .tpl-footer { color: #9c8e79; }
.tpl3 .tpl-footer { color: #6f8560; }
.tpl4 .tpl-footer { color: #9a9a9a; }
.tpl5 .tpl-footer { color: #7a6a66; }
.tpl6 .tpl-footer { color: #b9a878; }
.tpl7 .tpl-footer { color: #7a756c; }
.tpl8 .tpl-footer { color: #bfa45f; }

/* ============ Modo "so icone" (elementos maiores) ============ */
.icon-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  justify-items: center; width: 100%; max-width: 290px;
}
.icon-badge {
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.22); transition: transform .1s;
}
.icon-badge:active { transform: scale(.94); }
.icon-badge svg { width: 34px; height: 34px; }
.tpl1 .icon-badge { background: #bcab90; color: #fff; }
.tpl3 .icon-badge { background: #6f8560; color: #fff; }
.tpl4 .icon-badge { background: #333133; color: #c8a24a; border: 2px solid #c8a24a; }
.tpl5 .icon-badge { background: #d9a9a0; color: #4a3b38; }
.tpl6 .icon-badge { background: transparent; border: 1px solid #b8923f; color: #e6d6ac; box-shadow: none; }
.tpl7 .icon-badge { background: #fff; border: 1px solid #b9b2a6; color: #2b2b2b; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.tpl8 .icon-badge { background: linear-gradient(180deg, #f3d98b, #caa53d); color: #3a2e10; }

/* Fontes extras no seletor do editor */
.font-marcellus { font-family: "Marcellus", serif; }
.font-dancing { font-family: "Dancing Script", cursive; }
.font-greatvibes { font-family: "Great Vibes", cursive; }