/* ============================================================
   curriculum.pt — estilos globais, landing, editor e modelos CV
   ============================================================ */

:root {
  --azul: #1d4ed8;
  --azul-escuro: #1e3a8a;
  --texto: #1f2937;
  --texto-suave: #6b7280;
  --fundo: #f8fafc;
  --borda: #e5e7eb;
  --branco: #ffffff;
  --accent: #1d4ed8; /* cor do CV, alterável pelo utilizador */
}

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

[hidden] { display: none !important; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.6;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

a { color: var(--azul); }

/* ---------- Botões ---------- */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
  font-family: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--azul); color: #fff; }
.btn-primary:hover { background: var(--azul-escuro); }
.btn-outline { background: transparent; color: var(--azul); border: 2px solid var(--azul); }
.btn-outline:hover { background: var(--azul); color: #fff; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-lg { padding: 16px 32px; font-size: 18px; }

.btn-link {
  background: none; border: none; color: var(--azul);
  cursor: pointer; font-size: 13px; text-decoration: underline;
  font-family: inherit; padding: 4px 0; text-align: left;
}
.btn-danger { color: #dc2626; }

/* ============================================================
   LANDING
   ============================================================ */

.site-header {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo {
  font-size: 22px; font-weight: 800; color: var(--texto);
  text-decoration: none; letter-spacing: -0.5px;
}
.logo span { color: var(--azul); }
.logo-sm { font-size: 18px; }

.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { text-decoration: none; color: var(--texto); font-size: 15px; }
.site-nav a:hover { color: var(--azul); }

.hero {
  text-align: center;
  padding: 90px 0 70px;
  background: linear-gradient(180deg, #eff6ff 0%, var(--fundo) 100%);
}
.hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.15; letter-spacing: -1px; }
.hero h1 em { color: var(--azul); font-style: normal; }
.hero-sub { font-size: 19px; color: var(--texto-suave); margin: 20px 0 32px; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--texto-suave); }

.features { padding: 70px 0; }
.features h2, .pricing h2, .privacy-strip h2 { text-align: center; font-size: 32px; margin-bottom: 40px; letter-spacing: -0.5px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.feature {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 12px; padding: 28px; text-align: center;
}
.feature-icon { font-size: 36px; margin-bottom: 12px; }
.feature h3 { margin-bottom: 8px; font-size: 19px; }
.feature p { color: var(--texto-suave); font-size: 15px; }

.privacy-strip { background: #ecfdf5; padding: 56px 0; text-align: center; }
.privacy-strip h2 { margin-bottom: 16px; }
.privacy-strip p { max-width: 720px; margin: 0 auto; font-size: 16px; }

.pricing { padding: 70px 0 90px; }
.pricing-grid {
  display: grid; gap: 24px; max-width: 420px; margin: 0 auto;
}
.price-card {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 12px; padding: 32px; position: relative;
  display: flex; flex-direction: column; text-align: center;
}
.price-card h3 { font-size: 20px; }
.price { font-size: 40px; font-weight: 800; margin: 8px 0 16px; }
.price span { font-size: 14px; font-weight: 400; color: var(--texto-suave); }
.price-card ul { list-style: none; margin-bottom: 24px; flex: 1; }
.price-card li { padding: 5px 0; font-size: 15px; }
.price-card .btn { text-align: center; }

/* --- secção de apoio (Buy Me a Coffee) --- */
.apoio { padding: 0 0 90px; text-align: center; }
.apoio h2 { font-size: 26px; margin-bottom: 12px; letter-spacing: -0.5px; }
.apoio p { max-width: 560px; margin: 0 auto 24px; color: var(--texto-suave); font-size: 15px; }
.btn-coffee {
  background: #ffdd00; color: #1f2937;
  font-weight: 700;
}
.btn-coffee:hover { background: #f5d000; }
.apoio-nota { font-size: 12.5px !important; margin-top: 14px !important; }
.btn-coffee-link { text-decoration: none; color: var(--texto-suave); margin-top: 4px; }
.btn-coffee-link:hover { color: var(--texto); }

.site-footer {
  border-top: 1px solid var(--borda); padding: 28px 0;
  text-align: center; color: var(--texto-suave); font-size: 14px;
}

/* ============================================================
   EDITOR
   ============================================================ */

.editor-page { overflow: hidden; height: 100vh; display: flex; flex-direction: column; }

.editor-topbar {
  display: flex; align-items: center; gap: 20px;
  background: var(--branco); border-bottom: 1px solid var(--borda);
  padding: 10px 20px; flex-wrap: wrap;
}
.topbar-controls { display: flex; gap: 16px; align-items: center; flex: 1; }
.control { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); }
.control select {
  padding: 6px 10px; border: 1px solid var(--borda); border-radius: 6px;
  font-family: inherit; font-size: 14px; background: #fff;
}
.control input[type="color"] {
  width: 36px; height: 30px; border: 1px solid var(--borda);
  border-radius: 6px; cursor: pointer; background: #fff; padding: 2px;
}
.topbar-actions { display: flex; gap: 10px; }

.editor-layout { display: flex; flex: 1; min-height: 0; }

/* --- painel de formulário --- */
.form-panel {
  width: 420px; min-width: 320px; background: var(--branco);
  border-right: 1px solid var(--borda); overflow-y: auto; padding: 16px;
}

/* --- separadores de língua --- */
.lang-tabs {
  display: flex; gap: 6px; margin-bottom: 10px;
  background: #f1f5f9; border-radius: 8px; padding: 4px;
}
.lang-tab {
  flex: 1; padding: 8px 10px; border: none; border-radius: 6px;
  background: transparent; font-family: inherit; font-size: 14px;
  font-weight: 600; color: var(--texto-suave); cursor: pointer;
}
.lang-tab.active { background: #fff; color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lang-hint {
  font-size: 12.5px; color: var(--texto-suave);
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 12px;
}

.fields input:disabled, .fields textarea:disabled, .fields select:disabled {
  background: #f3f4f6; color: #9ca3af; cursor: not-allowed;
}

.rgpd-note {
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px;
  padding: 10px 32px 10px 12px; font-size: 13px; margin-bottom: 16px;
  position: relative;
}
.rgpd-close {
  position: absolute; top: 6px; right: 8px; background: none; border: none;
  font-size: 18px; cursor: pointer; color: var(--texto-suave); line-height: 1;
}

.form-section {
  border: 1px solid var(--borda); border-radius: 8px;
  margin-bottom: 12px; background: var(--branco);
}
.form-section summary {
  cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: 15px;
  user-select: none; list-style: none;
}
.form-section summary::-webkit-details-marker { display: none; }
.form-section summary::after { content: "▾"; float: right; color: var(--texto-suave); transition: transform .15s; }
.form-section:not([open]) summary::after { transform: rotate(-90deg); }
.form-section .fields { padding: 0 14px 14px; }

.fields label { display: block; font-size: 13px; color: var(--texto-suave); margin-bottom: 10px; }
.fields input[type="text"], .fields input[type="email"], .fields input[type="tel"],
.fields textarea, .fields select {
  display: block; width: 100%; margin-top: 4px;
  padding: 9px 10px; border: 1px solid var(--borda); border-radius: 6px;
  font-family: inherit; font-size: 14px; color: var(--texto);
  background: #fff;
}
.fields input:focus, .fields textarea:focus, .fields select:focus {
  outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul);
}
.fields textarea { resize: vertical; }
.fields input[type="file"] { margin-top: 4px; font-size: 13px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.lista-dinamica .item {
  border: 1px solid var(--borda); border-radius: 8px;
  padding: 12px; margin-bottom: 10px; background: #fafafa; position: relative;
}
.item-remove {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; color: #dc2626; cursor: pointer; font-size: 16px;
}
.check-atual { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 10px; }
.check-atual input { width: auto; margin: 0; }

.btn-add { width: 100%; padding: 9px; font-size: 14px; }

.panel-footer {
  border-top: 1px solid var(--borda); margin-top: 16px; padding-top: 14px;
  display: flex; flex-direction: column; gap: 6px;
}

/* --- painel de pré-visualização --- */
.preview-panel { flex: 1; min-width: 0; background: #64748b; overflow: hidden; display: flex; }
.preview-scroll {
  overflow: auto; flex: 1; min-width: 0; padding: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.sheet-wrap { flex-shrink: 0; }
.sheet-label {
  color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600;
  margin-bottom: 8px; letter-spacing: 0.5px;
}

/* ============================================================
   FOLHA DE CV (A4)
   ============================================================ */

.cv-sheet {
  /* variáveis de personalização — sobrepostas pelas classes
     .dens-*, .marg-* e pela --escala vinda do JS */
  --escala: 1;
  --pad-v: 15mm;
  --pad-h: 18mm;
  --gap-sec: 6mm;
  --gap-entrada: 4mm;
  --lh: 1.5;

  width: 210mm;
  min-height: 297mm;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  flex-shrink: 0;
  color: #1f2937;
  font-size: calc(10.5pt * var(--escala));
  line-height: var(--lh);
  position: relative;
  display: flex;
  flex-direction: column;
}

.cv-body { flex: 1; }

/* --- densidade --- */
.cv-sheet.dens-compacta { --gap-sec: 4mm; --gap-entrada: 2.6mm; --lh: 1.34; }
.cv-sheet.dens-normal   { --gap-sec: 6mm; --gap-entrada: 4mm;   --lh: 1.5; }
.cv-sheet.dens-espacosa { --gap-sec: 8.5mm; --gap-entrada: 6mm; --lh: 1.68; }

/* --- margens --- */
.cv-sheet.marg-estreitas { --pad-v: 10mm; --pad-h: 12mm; }
.cv-sheet.marg-normais   { --pad-v: 15mm; --pad-h: 18mm; }
.cv-sheet.marg-largas    { --pad-v: 20mm; --pad-h: 24mm; }

/* --- forma da fotografia --- */
.cv-sheet.foto-circulo .cv-foto     { border-radius: 50%; }
.cv-sheet.foto-arredondada .cv-foto { border-radius: 4mm; }
.cv-sheet.foto-quadrada .cv-foto    { border-radius: 0; }

.cv-nome { font-size: 26pt; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
.cv-titulo-prof { font-size: 13pt; color: var(--accent); font-weight: 600; margin-top: 2mm; }

.cv-contactos { font-size: 9.5pt; color: #4b5563; }
.cv-contactos span { white-space: nowrap; }

.cv-foto { width: 30mm; height: 30mm; object-fit: cover; border-radius: 50%; }

.cv-seccao { margin-top: var(--gap-sec); }
.cv-seccao h2 {
  font-size: 11.5pt; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--accent); border-bottom: 1.5px solid var(--accent);
  padding-bottom: 1mm; margin-bottom: 3mm;
}

.cv-entrada { margin-bottom: var(--gap-entrada); break-inside: avoid; }
.cv-entrada-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 6mm; }
.cv-entrada h3 { font-size: 11pt; font-weight: 700; }
.cv-entrada .cv-org { font-size: 10pt; color: #4b5563; font-style: italic; }
.cv-entrada .cv-datas { font-size: 9pt; color: #6b7280; white-space: nowrap; }
.cv-entrada p { font-size: 9.5pt; margin-top: 1mm; white-space: pre-line; }

.cv-lista-competencias { list-style: none; display: flex; flex-wrap: wrap; gap: 2mm; }
.cv-lista-competencias li {
  border: 1px solid var(--accent); color: var(--accent);
  border-radius: 99px; padding: 0.5mm 3mm; font-size: 9pt;
}

.cv-linguas { list-style: none; }
.cv-linguas li { display: flex; justify-content: space-between; font-size: 9.5pt; padding: 0.5mm 0; }
.cv-linguas .nivel { color: #6b7280; }

.cv-resumo { font-size: 10pt; white-space: pre-line; }
.cv-extras { font-size: 9.5pt; white-space: pre-line; }

.cv-vazio {
  padding: 30mm 20mm; text-align: center; color: #9ca3af; font-size: 12pt;
}

/* --- assinatura curriculum.pt --- */
.cv-watermark {
  text-align: center; font-size: 7.5pt; color: #9ca3af;
  padding: 3mm 0 4mm; margin-top: auto;
}

/* ============================================================
   ESTRUTURAS DOS MODELOS
   Cinco arranjos de HTML (ver js/cv-render.js). Tudo o que é
   posicionamento vive aqui; cada modelo só muda o aspecto.
   ============================================================ */

/* --- coluna única: cabeçalho empilhado --- */
.estr-unica { padding: var(--pad-v) var(--pad-h) 8mm; }
.estr-unica .cv-header { padding-bottom: 3mm; }
.estr-unica .cv-foto { display: block; margin: 0 auto 3mm; }

/* --- cabeçalho em linha: texto à esquerda, contactos/foto à direita --- */
.estr-topo { padding: var(--pad-v) var(--pad-h) 8mm; }
.estr-topo .cv-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8mm; padding-bottom: 3mm;
}
.estr-topo .cv-header-texto { min-width: 0; }
.estr-topo .cv-header-lado { display: flex; align-items: center; gap: 5mm; flex-shrink: 0; }
.estr-topo .cv-header-lado .cv-contactos { text-align: right; }
.estr-topo .cv-header-lado .cv-contactos span { display: block; }

/* --- faixa a toda a largura (cor, degradado ou imagem) --- */
.estr-faixa { padding: 0 0 8mm; }
.estr-faixa .cv-header { position: relative; overflow: hidden; background: var(--accent); color: #fff; }
.estr-faixa .cv-header-imagem {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat;
}
.estr-faixa .cv-header-veu { position: absolute; inset: 0; background: #0f172a; }
.estr-faixa .cv-header-conteudo {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 8mm;
  padding: var(--pad-v) var(--pad-h);
}
.estr-faixa .cv-header-texto { min-width: 0; }
.estr-faixa .cv-header .cv-nome { color: #fff; }
.estr-faixa .cv-header .cv-titulo-prof { color: rgba(255,255,255,.92); }
.estr-faixa .cv-header .cv-contactos { color: rgba(255,255,255,.9); margin-top: 3mm; }
.estr-faixa .cv-header .cv-contactos span:not(:last-child)::after { content: "   ·   "; color: rgba(255,255,255,.55); }
.estr-faixa .cv-header .cv-foto { flex-shrink: 0; border: 1mm solid rgba(255,255,255,.35); }
.estr-faixa .cv-header.com-imagem { min-height: 46mm; }
.estr-faixa .cv-header.com-imagem .cv-header-conteudo { align-items: flex-end; }
.estr-faixa .cv-conteudo { padding: 0 var(--pad-h); }

/* --- barra lateral (à esquerda ou à direita) --- */
.estr-lateral-esq, .estr-lateral-dir { padding: 0; }
.estr-lateral-esq .cv-body, .estr-lateral-dir .cv-body { display: flex; min-height: 297mm; }
.cv-lateral {
  width: 62mm; flex-shrink: 0;
  padding: var(--pad-v) calc(var(--pad-h) * 0.45);
  background: color-mix(in srgb, var(--accent) 92%, black);
  color: #fff;
}
.cv-lateral .cv-foto { display: block; margin: 0 auto 6mm; border: 2mm solid rgba(255,255,255,.25); }
.cv-lateral > .cv-seccao:first-child { margin-top: 0; }
.cv-lateral .cv-seccao h2 { color: #fff; border-bottom-color: rgba(255,255,255,.4); font-size: 10.5pt; }
.cv-lateral .cv-contactos { color: rgba(255,255,255,.9); }
.cv-lateral .cv-contactos span { display: block; white-space: normal; word-break: break-word; padding: 0.8mm 0; }
.cv-lateral .cv-lista-competencias li { border-color: rgba(255,255,255,.6); color: #fff; }
.cv-lateral .cv-linguas li { color: #fff; }
.cv-lateral .cv-linguas .nivel { color: rgba(255,255,255,.7); }
.cv-principal {
  flex: 1; min-width: 0;
  padding: var(--pad-v) calc(var(--pad-h) * 0.58) 8mm;
  display: flex; flex-direction: column;
}
.cv-principal .cv-nome { font-size: 24pt; }
.cv-principal .cv-watermark { margin-top: auto; }

/* ============================================================
   OS 20 MODELOS
   ============================================================ */

/* ---------- 1. Compacto (o mais seguro para leitores ATS) ---------- */
.template-compacto { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-compacto .cv-header { border-bottom: 0.5mm solid #1f2937; }
.template-compacto .cv-nome { font-size: 20pt; font-weight: 700; letter-spacing: 0; }
.template-compacto .cv-titulo-prof { font-size: 11.5pt; color: #1f2937; font-weight: 600; margin-top: 1mm; }
.template-compacto .cv-foto { margin: 0 0 3mm; width: 26mm; height: 26mm; }
.template-compacto .cv-contactos { margin-top: 2mm; }
.template-compacto .cv-contactos span:not(:last-child)::after { content: "  |  "; color: #9ca3af; }
.template-compacto .cv-seccao h2 { color: #1f2937; border-bottom: 0.3mm solid #9ca3af; font-size: 10.5pt; letter-spacing: 1px; }
.template-compacto .cv-entrada h3 { font-size: 10.5pt; }
/* listas em texto simples: os leitores automáticos preferem-nas a "chips" */
.template-compacto .cv-lista-competencias { display: block; }
.template-compacto .cv-lista-competencias li { display: inline; border: none; padding: 0; border-radius: 0; color: #1f2937; font-size: 9.5pt; }
.template-compacto .cv-lista-competencias li:not(:last-child)::after { content: " • "; color: #6b7280; }
.template-compacto .cv-linguas li { display: block; }
.template-compacto .cv-linguas .nivel::before { content: " — "; }

/* ---------- 2. Clássico ---------- */
.template-classico { font-family: Georgia, 'Times New Roman', serif; }
.template-classico .cv-header { text-align: center; border-bottom: 2px solid #1f2937; padding-bottom: 4mm; }
.template-classico .cv-nome { font-size: 24pt; }
.template-classico .cv-titulo-prof { color: #4b5563; }
.template-classico .cv-contactos { margin-top: 2mm; }
.template-classico .cv-contactos span:not(:last-child)::after { content: "  ·  "; }
.template-classico .cv-seccao h2 { color: #1f2937; border-bottom: 1px solid #9ca3af; text-align: center; letter-spacing: 3px; }
.template-classico .cv-lista-competencias li { border-color: #4b5563; color: #1f2937; border-radius: 0; }

/* ---------- 3. Harvard ---------- */
.template-harvard { font-family: Georgia, 'Times New Roman', serif; }
.template-harvard .cv-header { text-align: center; padding-bottom: 2mm; }
.template-harvard .cv-nome { font-size: 21pt; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.template-harvard .cv-titulo-prof { color: #1f2937; font-size: 11pt; font-weight: 400; font-style: italic; }
.template-harvard .cv-foto { width: 26mm; height: 26mm; }
.template-harvard .cv-contactos { margin-top: 2mm; }
.template-harvard .cv-contactos span:not(:last-child)::after { content: "  •  "; }
.template-harvard .cv-seccao h2 {
  color: #000; border-bottom: 1px solid #000; text-transform: uppercase;
  letter-spacing: 1.5px; font-size: 11pt; font-weight: 700;
}
.template-harvard .cv-entrada h3 { font-size: 11pt; }
.template-harvard .cv-entrada .cv-org { font-style: italic; color: #1f2937; }
.template-harvard .cv-lista-competencias { display: block; }
.template-harvard .cv-lista-competencias li { display: inline; border: none; padding: 0; color: #1f2937; }
.template-harvard .cv-lista-competencias li:not(:last-child)::after { content: "; "; }

/* ---------- 4. Linear ---------- */
.template-linear { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-linear .cv-nome { font-size: 23pt; font-weight: 700; }
.template-linear .cv-contactos { margin-top: 2mm; }
.template-linear .cv-contactos span:not(:last-child)::after { content: "  /  "; color: var(--accent); }
.template-linear .cv-seccao {
  border-top: 0.4mm solid #e5e7eb; padding-top: 3mm;
}
.template-linear .cv-seccao h2 {
  border-bottom: none; color: var(--accent); font-size: 10pt;
  letter-spacing: 2.5px; margin-bottom: 2mm;
}
.template-linear .cv-lista-competencias li { border-color: #d1d5db; color: #1f2937; }

/* ---------- 5. Nítido ---------- */
.template-nitido { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-nitido .cv-nome { font-size: 30pt; font-weight: 800; letter-spacing: -1px; }
.template-nitido .cv-titulo-prof { font-size: 12pt; letter-spacing: 1px; text-transform: uppercase; }
.template-nitido .cv-contactos { margin-top: 3mm; }
.template-nitido .cv-contactos span:not(:last-child)::after { content: "   "; }
.template-nitido .cv-seccao h2 {
  border-bottom: none; color: #1f2937; font-size: 13pt; font-weight: 800;
  letter-spacing: 0; text-transform: none; margin-bottom: 2mm;
}
.template-nitido .cv-seccao h2::after {
  content: ""; display: block; width: 12mm; height: 1mm;
  background: var(--accent); margin-top: 1.5mm;
}
.template-nitido .cv-lista-competencias li { border: none; background: #f3f4f6; color: #1f2937; }

/* ---------- 6. Editorial ---------- */
.template-editorial { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-editorial .cv-header { border-bottom: 0.4mm solid #1f2937; }
.template-editorial .cv-nome {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30pt; font-weight: 400; letter-spacing: -0.5px;
}
.template-editorial .cv-titulo-prof { font-size: 11pt; letter-spacing: 3px; text-transform: uppercase; font-weight: 400; }
.template-editorial .cv-contactos { margin-top: 2.5mm; }
.template-editorial .cv-contactos span:not(:last-child)::after { content: "  ·  "; }
.template-editorial .cv-seccao h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; text-transform: none; letter-spacing: 0;
  font-size: 13pt; border-bottom: none; color: var(--accent); margin-bottom: 2mm;
}
.template-editorial .cv-entrada h3 { font-family: Georgia, 'Times New Roman', serif; font-size: 11.5pt; }
.template-editorial .cv-lista-competencias li { border: none; border-bottom: 0.3mm solid var(--accent); border-radius: 0; padding: 0 1mm; color: #1f2937; }

/* ---------- 7. Técnico ---------- */
.template-tecnico { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-tecnico .cv-nome { font-size: 22pt; font-weight: 700; }
.template-tecnico .cv-titulo-prof, .template-tecnico .cv-contactos, .template-tecnico .cv-datas {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
.template-tecnico .cv-titulo-prof { font-size: 11pt; font-weight: 400; }
.template-tecnico .cv-contactos { margin-top: 2mm; font-size: 9pt; }
.template-tecnico .cv-contactos span:not(:last-child)::after { content: "  ·  "; color: var(--accent); }
.template-tecnico .cv-seccao h2 { border-bottom: none; color: var(--accent); font-size: 11pt; letter-spacing: 0.5px; margin-bottom: 2mm; }
.template-tecnico .cv-seccao h2::before { content: "// "; opacity: .55; }
.template-tecnico .cv-entrada .cv-org { font-style: normal; font-weight: 600; }
.template-tecnico .cv-lista-competencias li {
  border: none; background: #f1f5f9; color: #1f2937; border-radius: 1mm;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 8.5pt;
}

/* ---------- 8. Formal ---------- */
.template-formal { font-family: Georgia, 'Times New Roman', serif; }
.template-formal .cv-header { border-bottom: 0.4mm solid var(--accent); }
.template-formal .cv-nome { font-size: 22pt; font-weight: 700; }
.template-formal .cv-titulo-prof { color: #4b5563; font-weight: 400; }
.template-formal .cv-contactos { margin-top: 2mm; }
.template-formal .cv-contactos span { display: inline-block; margin-right: 5mm; }
.template-formal .cv-seccao h2 {
  background: #f3f4f6; border-bottom: none; border-left: 1.4mm solid var(--accent);
  color: #1f2937; font-size: 10.5pt; letter-spacing: 1.5px;
  padding: 1.2mm 3mm; margin-bottom: 2.5mm;
}
.template-formal .cv-lista-competencias li { border-color: #9ca3af; color: #1f2937; border-radius: 0; }

/* ---------- 9. Minimal ---------- */
.template-minimal { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-minimal .cv-nome { font-weight: 300; font-size: 28pt; }
.template-minimal .cv-nome strong { font-weight: 800; }
.template-minimal .cv-contactos span { display: block; }
.template-minimal .cv-seccao h2 { border-bottom: none; font-size: 10pt; letter-spacing: 3px; color: #9ca3af; }
.template-minimal .cv-lista-competencias li { border: none; background: #f3f4f6; color: #1f2937; }

/* ---------- 10. Nórdico ---------- */
.template-nordico { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-nordico .cv-header { border-bottom: 0.3mm solid #e5e7eb; }
.template-nordico .cv-nome { font-size: 20pt; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; }
.template-nordico .cv-titulo-prof { font-size: 10.5pt; font-weight: 400; letter-spacing: 1.5px; margin-top: 2.5mm; }
.template-nordico .cv-contactos { font-size: 8.5pt; letter-spacing: 0.5px; }
.template-nordico .cv-seccao h2 {
  border-bottom: none; color: #9ca3af; font-size: 9pt; letter-spacing: 3.5px; margin-bottom: 2.5mm;
}
.template-nordico .cv-entrada h3 { font-weight: 600; }
.template-nordico .cv-lista-competencias li { border-color: #e5e7eb; color: #4b5563; }
.template-nordico .cv-linguas li { border-bottom: 0.3mm solid #f3f4f6; }

/* ---------- 11. Contraste ---------- */
.template-contraste { font-family: 'Segoe UI', system-ui, sans-serif; padding-top: 0; }
.template-contraste .cv-header {
  background: #111827; color: #fff;
  margin: 0 calc(var(--pad-h) * -1) var(--gap-sec);
  padding: var(--pad-v) var(--pad-h) calc(var(--pad-v) * 0.7);
  align-items: flex-end;
}
.template-contraste .cv-nome { font-size: 26pt; font-weight: 800; letter-spacing: -0.5px; }
.template-contraste .cv-titulo-prof { color: var(--accent); font-size: 12pt; }
.template-contraste .cv-contactos { color: rgba(255,255,255,.85); }
.template-contraste .cv-foto { border: 1mm solid rgba(255,255,255,.3); }
.template-contraste .cv-seccao h2 { border-bottom: none; color: #111827; font-size: 11pt; }
.template-contraste .cv-seccao h2::after {
  content: ""; display: block; width: 100%; height: 0.4mm;
  background: linear-gradient(90deg, var(--accent) 18mm, #e5e7eb 18mm);
  margin-top: 1.5mm;
}
.template-contraste .cv-lista-competencias li { border: none; background: #111827; color: #fff; }

/* ---------- 12. Cartão ---------- */
.template-cartao { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-cartao .cv-header {
  background: color-mix(in srgb, var(--accent) 8%, white);
  border: 0.3mm solid color-mix(in srgb, var(--accent) 30%, white);
  border-radius: 3mm; padding: 6mm 7mm; margin-bottom: 2mm;
}
.template-cartao .cv-nome { font-size: 23pt; font-weight: 700; }
.template-cartao .cv-titulo-prof { font-size: 11.5pt; }
.template-cartao .cv-contactos { font-size: 9pt; }
.template-cartao .cv-seccao h2 { border-bottom: none; color: var(--accent); font-size: 10.5pt; letter-spacing: 2px; margin-bottom: 2mm; }
.template-cartao .cv-entrada {
  border-left: 0.6mm solid color-mix(in srgb, var(--accent) 35%, white);
  padding-left: 4mm;
}
.template-cartao .cv-lista-competencias li { border: none; background: color-mix(in srgb, var(--accent) 10%, white); color: #1f2937; }

/* ---------- 13. Executivo ---------- */
.template-executivo { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-executivo .cv-nome { font-size: 23pt; font-weight: 700; }
.template-executivo .cv-titulo-prof { font-weight: 400; font-size: 12pt; }
.template-executivo .cv-seccao h2 {
  border-bottom: none; color: #1f2937; font-size: 11pt; letter-spacing: 2px;
  border-left: 1.4mm solid var(--accent); padding: 0 0 0 3mm; margin-bottom: 3mm;
}
.template-executivo .cv-entrada h3 { font-size: 11.5pt; }
.template-executivo .cv-lista-competencias li { border: none; background: color-mix(in srgb, var(--accent) 12%, white); color: #1f2937; }

/* ---------- 14. Capa (pensado para imagem de fundo) ---------- */
.template-capa { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-capa .cv-header {
  min-height: 52mm;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, black));
}
.template-capa .cv-header.com-imagem { min-height: 62mm; }
.template-capa .cv-header-conteudo { align-items: flex-end; }
.template-capa .cv-nome { font-size: 28pt; font-weight: 800; letter-spacing: -0.5px; }
.template-capa .cv-titulo-prof { font-size: 12.5pt; letter-spacing: 1px; }
.template-capa .cv-foto { width: 34mm; height: 34mm; }
.template-capa .cv-seccao h2 { border-bottom: none; color: var(--accent); font-size: 11pt; letter-spacing: 2.5px; margin-bottom: 2mm; }
.template-capa .cv-lista-competencias li { border: none; background: color-mix(in srgb, var(--accent) 12%, white); color: #1f2937; }

/* ---------- 15. Gradiente ---------- */
.template-gradiente { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-gradiente .cv-header {
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 60%, black), var(--accent) 70%);
}
.template-gradiente .cv-nome { font-size: 25pt; font-weight: 700; }
.template-gradiente .cv-seccao h2 {
  border-bottom: 0.4mm solid color-mix(in srgb, var(--accent) 25%, white);
  color: var(--accent); font-size: 11pt;
}
.template-gradiente .cv-lista-competencias li {
  border: none; color: #fff;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 70%, black), var(--accent));
}

/* ---------- 16. Bloco ---------- */
.template-bloco { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-bloco .cv-header { background: #f3f4f6; color: #1f2937; }
.template-bloco .cv-header .cv-nome {
  color: #fff; background: var(--accent);
  display: inline-block; padding: 2mm 5mm; font-size: 22pt; font-weight: 700;
}
.template-bloco .cv-header .cv-titulo-prof { color: #4b5563; margin-top: 3mm; }
.template-bloco .cv-header .cv-contactos { color: #4b5563; }
.template-bloco .cv-header .cv-contactos span:not(:last-child)::after { color: #9ca3af; }
.template-bloco .cv-header .cv-foto { border-color: #fff; }
.template-bloco .cv-seccao h2 {
  border-bottom: none; background: #f3f4f6; color: #1f2937;
  padding: 1.2mm 3mm; font-size: 10.5pt; letter-spacing: 2px; margin-bottom: 2.5mm;
}
.template-bloco .cv-lista-competencias li { border: none; background: #f3f4f6; color: #1f2937; border-radius: 0; }

/* ---------- 17. Moderno ---------- */
.template-moderno { font-family: 'Segoe UI', system-ui, sans-serif; }

/* ---------- 18. Escuro ---------- */
.template-escuro { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-escuro .cv-lateral { background: #1f2937; }
.template-escuro .cv-lateral .cv-seccao h2 { color: var(--accent); border-bottom-color: rgba(255,255,255,.18); }
.template-escuro .cv-lateral .cv-lista-competencias li { border-color: rgba(255,255,255,.3); }
.template-escuro .cv-principal .cv-titulo-prof { color: var(--accent); }
.template-escuro .cv-principal .cv-seccao h2 { border-bottom-color: #e5e7eb; color: #1f2937; }
.template-escuro .cv-principal .cv-seccao h2 { border-left: 1.2mm solid var(--accent); border-bottom: none; padding-left: 3mm; }

/* ---------- 19. Suave ---------- */
.template-suave { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-suave .cv-lateral {
  background: color-mix(in srgb, var(--accent) 12%, white);
  color: #1f2937;
}
.template-suave .cv-lateral .cv-foto { border-color: rgba(255,255,255,.85); }
.template-suave .cv-lateral .cv-seccao h2 { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 35%, white); }
.template-suave .cv-lateral .cv-contactos { color: #374151; }
.template-suave .cv-lateral .cv-lista-competencias li { border-color: color-mix(in srgb, var(--accent) 45%, white); color: #1f2937; }
.template-suave .cv-lateral .cv-linguas li { color: #1f2937; }
.template-suave .cv-lateral .cv-linguas .nivel { color: #6b7280; }

/* ---------- 20. Ficha (barra estreita à direita) ---------- */
.template-ficha { font-family: 'Segoe UI', system-ui, sans-serif; }
.template-ficha .cv-lateral {
  width: 56mm; background: #f8fafc; color: #1f2937;
  border-left: 0.4mm solid #e5e7eb;
}
.template-ficha .cv-lateral .cv-foto { border-color: #fff; }
.template-ficha .cv-lateral .cv-seccao h2 {
  color: #1f2937; border-bottom: none; font-size: 9.5pt; letter-spacing: 2px;
}
.template-ficha .cv-lateral .cv-seccao h2::after {
  content: ""; display: block; width: 8mm; height: 0.8mm; background: var(--accent); margin-top: 1.2mm;
}
.template-ficha .cv-lateral .cv-contactos { color: #4b5563; }
.template-ficha .cv-lateral .cv-lista-competencias li { border-color: #d1d5db; color: #1f2937; }
.template-ficha .cv-lateral .cv-linguas li { color: #1f2937; }
.template-ficha .cv-lateral .cv-linguas .nivel { color: #6b7280; }
.template-ficha .cv-lateral .cv-extras { font-size: 9pt; }
.template-ficha .cv-principal .cv-nome { font-size: 26pt; }


/* ============================================================
   IMPRESSÃO — apenas a folha A4
   ============================================================ */

@page { size: A4; margin: 0; }

@media print {
  html, body { width: 210mm; margin: 0; padding: 0; }
  body, .editor-page { overflow: visible; height: auto; display: block; background: #fff; }
  .no-print { display: none !important; }
  .editor-layout { display: block; }
  .form-panel { display: none !important; }
  .preview-panel { background: #fff; overflow: visible; display: block; }
  .preview-scroll { padding: 0; overflow: visible; display: block; }
  /* anula os estilos inline da escala de ecrã (js/editor.js) */
  .sheet-wrap { margin: 0; width: auto !important; height: auto !important; }
  .cv-sheet {
    box-shadow: none;
    width: 210mm;
    min-height: auto;
    margin: 0;
    transform: none !important; /* anula a escala do modo ecrã-pequeno */
  }
  /* as barras laterais preenchem a altura da página (296mm em vez de
     297mm para evitar uma página em branco por arredondamento) */
  .estr-lateral-esq .cv-body, .estr-lateral-dir .cv-body { min-height: 296mm; }

  /* impressão bilingue: cada língua começa numa página nova;
     as classes print-so-* limitam o PDF a uma só língua */
  .sheet-wrap + .sheet-wrap:not([hidden]) { break-before: page; }
  body.print-so-pt #wrap-l2 { display: none !important; }
  body.print-so-l2 #wrap-pt { display: none !important; }

  /* fundos e imagens só saem no papel/PDF com esta indicação */
  .cv-lateral,
  .estr-faixa .cv-header,
  .cv-header-imagem,
  .cv-header-veu,
  .cv-seccao h2,
  .cv-header,
  .cv-nome,
  .cv-lista-competencias li {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* apenas em ecrã: em impressão a página A4 tem ~794px de largura e
   activaria estas regras por engano (a escala das folhas em ecrãs
   estreitos é calculada em js/editor.js, não aqui) */
@media screen and (max-width: 900px) {
  .editor-page { overflow: auto; height: auto; }
  .editor-topbar { gap: 8px 14px; padding: 8px 12px; }
  .topbar-controls { flex-wrap: wrap; gap: 8px 12px; }
  .control { font-size: 12px; gap: 5px; }
  .control select { font-size: 13px; padding: 5px 6px; max-width: 140px; }
  .topbar-actions { width: 100%; flex-wrap: wrap; align-items: center; gap: 8px; }
  .topbar-actions .btn { flex: 1 1 auto; white-space: nowrap; }
  .editor-layout { flex-direction: column; }
  .form-panel { width: 100%; min-width: 0; max-height: none; border-right: none; border-bottom: 1px solid var(--borda); }
  .preview-panel { overflow: visible; }
  .preview-scroll { padding: 16px 8px; overflow: visible; }
  .site-nav { gap: 12px; font-size: 14px; }
}

@media screen and (max-width: 640px) {
  /* landing: só os botões cabem no header */
  .site-nav a:not(.btn) { display: none; }
  .header-inner { gap: 8px; }
  .logo { font-size: 19px; }
  .hero { padding: 56px 0 44px; }
  .hero-sub { font-size: 16px; }
  .btn-lg { padding: 14px 22px; font-size: 16px; }
  .features, .pricing { padding: 48px 0; }
  .features h2, .pricing h2, .privacy-strip h2 { font-size: 26px; margin-bottom: 28px; }
  .privacy-strip { padding: 40px 0; }
  .apoio { padding: 0 0 56px; }
  .price-card { padding: 24px; }

  /* editor: formulários a uma coluna */
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   EDITOR — personalização, partilha e dicas
   ============================================================ */

/* --- barra superior: botões secundários --- */
.btn-ghost {
  background: #fff; color: var(--texto); border: 1px solid var(--borda);
}
.btn-ghost:hover { background: #f8fafc; border-color: #cbd5e1; }

.topbar-actions .btn { white-space: nowrap; }

/* --- painel lateral de personalização (gaveta à direita) --- */
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw;
  background: var(--branco); border-left: 1px solid var(--borda);
  box-shadow: -8px 0 32px rgba(15,23,42,.18);
  z-index: 120; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease;
}
.gaveta.aberta { transform: translateX(0); }
.gaveta-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--borda);
}
.gaveta-topo h2 { font-size: 17px; letter-spacing: -0.3px; }
.gaveta-corpo { overflow-y: auto; padding: 16px; flex: 1; }
.gaveta-fechar {
  background: none; border: none; font-size: 24px; line-height: 1;
  cursor: pointer; color: var(--texto-suave); padding: 0 4px;
}
.gaveta-fechar:hover { color: var(--texto); }

.fundo-modal {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  z-index: 110; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.fundo-modal.visivel { opacity: 1; pointer-events: auto; }

.grupo { margin-bottom: 22px; }
.grupo > h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--texto-suave); margin-bottom: 10px; font-weight: 700;
}
.grupo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.grupo-linha > span { font-size: 14px; }
.grupo-linha select, .grupo-linha input[type="color"] {
  padding: 7px 9px; border: 1px solid var(--borda); border-radius: 6px;
  font-family: inherit; font-size: 14px; background: #fff; min-width: 150px;
}
.grupo-linha input[type="color"] { min-width: 0; width: 44px; height: 32px; padding: 2px; cursor: pointer; }
.grupo-nota { font-size: 12.5px; color: var(--texto-suave); margin-top: 6px; line-height: 1.5; }

/* segmentos (densidade, margens, forma da foto) */
.segmentos { display: flex; background: #f1f5f9; border-radius: 8px; padding: 3px; gap: 3px; }
.segmentos button {
  flex: 1; border: none; background: transparent; border-radius: 6px;
  padding: 7px 4px; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--texto-suave); cursor: pointer; white-space: nowrap;
}
.segmentos button.activo { background: #fff; color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* paletas de cor */
.paletas { display: flex; flex-wrap: wrap; gap: 8px; }
.paleta {
  width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent;
  cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.paleta.activa { border-color: var(--texto); }

/* slider do tamanho de letra */
.grupo input[type="range"] { width: 100%; accent-color: var(--azul); margin-top: 4px; }
.valor-range { font-variant-numeric: tabular-nums; color: var(--texto-suave); font-size: 13px; }

/* interruptores */
.interruptor { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 10px; cursor: pointer; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--azul); cursor: pointer; }

/* ordenar / renomear secções */
.lista-seccoes { display: flex; flex-direction: column; gap: 6px; }
.seccao-item {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--borda); border-radius: 8px; padding: 6px 8px; background: #fafafa;
}
.seccao-item .nome { flex: 1; min-width: 0; }
.seccao-item input {
  width: 100%; border: 1px solid transparent; background: transparent;
  font-family: inherit; font-size: 14px; padding: 4px 6px; border-radius: 5px; color: var(--texto);
}
.seccao-item input:hover { border-color: var(--borda); background: #fff; }
.seccao-item input:focus { outline: 2px solid var(--azul); outline-offset: -1px; background: #fff; }
.seccao-mover {
  border: 1px solid var(--borda); background: #fff; border-radius: 5px;
  width: 26px; height: 26px; cursor: pointer; color: var(--texto-suave);
  font-size: 12px; line-height: 1; flex-shrink: 0;
}
.seccao-mover:hover:not(:disabled) { background: #f1f5f9; color: var(--texto); }
.seccao-mover:disabled { opacity: .35; cursor: default; }

.gaveta-rodape {
  border-top: 1px solid var(--borda); padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

/* --- modal de partilha --- */
.modal {
  position: fixed; z-index: 130; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(.98);
  width: 560px; max-width: 94vw; max-height: 88vh; overflow-y: auto;
  background: var(--branco); border-radius: 14px; padding: 26px;
  box-shadow: 0 24px 64px rgba(15,23,42,.28);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.modal.visivel { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal h2 { font-size: 21px; letter-spacing: -0.4px; margin-bottom: 6px; }
.modal > p { color: var(--texto-suave); font-size: 14.5px; margin-bottom: 18px; }
.modal-fechar { position: absolute; top: 12px; right: 14px; }

.link-caixa { display: flex; gap: 8px; margin-bottom: 12px; }
.link-caixa input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--borda);
  border-radius: 8px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 12.5px; background: #f8fafc; color: var(--texto);
}
.link-caixa .btn { flex-shrink: 0; }

.partilha-opcoes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.partilha-redes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.partilha-redes a {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px;
  text-decoration: none; color: var(--texto); font-size: 14px; font-weight: 600; background: #fff;
}
.partilha-redes a:hover { background: #f8fafc; border-color: #cbd5e1; }

.aviso-caixa {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 10px 12px; font-size: 13px; line-height: 1.55; color: #78350f;
}
.aviso-caixa strong { color: #78350f; }
.link-info { font-size: 12.5px; color: var(--texto-suave); margin-bottom: 14px; }
.link-info.longo { color: #b45309; }

/* --- painel de dicas --- */
.dicas-cabecalho { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.dicas-anel {
  --p: 0;
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--cor-p) calc(var(--p) * 1%), #e5e7eb 0);
  display: grid; place-items: center; position: relative;
}
.dicas-anel::after {
  content: ""; position: absolute; inset: 7px; background: #fff; border-radius: 50%;
}
.dicas-anel span { position: relative; z-index: 1; font-size: 21px; font-weight: 800; }
.dicas-anel.bom   { --cor-p: #059669; }
.dicas-anel.medio { --cor-p: #d97706; }
.dicas-anel.fraco { --cor-p: #dc2626; }
.dicas-cabecalho h3 { font-size: 17px; letter-spacing: -0.3px; }
.dicas-cabecalho p { font-size: 13px; color: var(--texto-suave); margin-top: 3px; }

.dicas-lista { display: flex; flex-direction: column; gap: 10px; }
.dica {
  border: 1px solid var(--borda); border-left: 4px solid var(--borda);
  border-radius: 8px; padding: 11px 13px; background: #fff;
}
.dica.erro  { border-left-color: #dc2626; background: #fef2f2; }
.dica.aviso { border-left-color: #f59e0b; background: #fffbeb; }
.dica.dica  { border-left-color: #3b82f6; background: #eff6ff; }
.dica h4 { font-size: 14px; margin-bottom: 3px; }
.dica p { font-size: 13px; color: #4b5563; line-height: 1.55; }

.dicas-tudo-bem {
  text-align: center; padding: 28px 16px; color: var(--texto-suave); font-size: 14.5px;
}
.dicas-tudo-bem .grande { font-size: 40px; display: block; margin-bottom: 10px; }

/* ============================================================
   PÁGINA PÚBLICA DO CURRÍCULO (cv.html)
   ============================================================ */

.pagina-cv { background: #64748b; min-height: 100vh; }
.cv-publico-topo {
  background: var(--branco); border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 40;
}
.cv-publico-topo .header-inner { gap: 12px; flex-wrap: wrap; height: auto; padding: 10px 0; }
.cv-publico-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-publico-acoes .control select { max-width: 190px; }

.cv-publico-area { padding: 32px 16px 48px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cv-publico-area .cv-sheet { box-shadow: 0 8px 32px rgba(0,0,0,.4); }

.cv-publico-rodape {
  background: var(--branco); text-align: center; padding: 30px 20px;
  border-top: 1px solid var(--borda);
}
.cv-publico-rodape h2 { font-size: 21px; margin-bottom: 8px; letter-spacing: -0.4px; }
.cv-publico-rodape p { color: var(--texto-suave); font-size: 14.5px; margin-bottom: 16px; }

.cv-estado {
  max-width: 560px; margin: 80px auto; background: var(--branco);
  border-radius: 14px; padding: 40px 32px; text-align: center;
}
.cv-estado .grande { font-size: 46px; display: block; margin-bottom: 14px; }
.cv-estado h1 { font-size: 24px; margin-bottom: 10px; letter-spacing: -0.5px; }
.cv-estado p { color: var(--texto-suave); margin-bottom: 20px; }

/* ============================================================
   RESPONSIVO — novos blocos
   ============================================================ */

@media screen and (max-width: 900px) {
  .gaveta { width: 100%; max-width: none; }
  .modal { padding: 20px; }
  .link-caixa { flex-direction: column; }
  .link-caixa .btn { width: 100%; }
  .cv-publico-area { padding: 16px 8px 32px; }
}

@media print {
  .gaveta, .fundo-modal, .modal,
  .cv-publico-topo, .cv-publico-rodape { display: none !important; }
  .pagina-cv { background: #fff; }
  .cv-publico-area { padding: 0; display: block; }
  .cv-publico-area .cv-sheet { box-shadow: none; }
}

/* ============================================================
   MINIATURAS DE MODELOS (galeria e selector do editor)
   ============================================================ */

.mini {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--borda); border-radius: 8px;
}
.mini .mini-folha { width: 210mm; }
.mini .cv-sheet { box-shadow: none; }
/* a miniatura é decorativa: não deve apanhar cliques nem selecção */
.mini * { pointer-events: none; user-select: none; }

.selo {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px; letter-spacing: .2px;
}
.selo.ok { background: #ecfdf5; color: #065f46; }
.selo.aviso { background: #fffbeb; color: #92400e; }
.selo.criativo { background: #eff6ff; color: #1e40af; }

/* --- filtros (usados na galeria e no selector) --- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.filtro {
  border: 1px solid var(--borda); background: #fff; color: var(--texto);
  border-radius: 99px; padding: 7px 15px; font-family: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
.filtro:hover { border-color: #cbd5e1; background: #f8fafc; }
.filtro.activo { background: var(--texto); color: #fff; border-color: var(--texto); }

/* ============================================================
   GALERIA DE MODELOS (modelos.html)
   ============================================================ */

.galeria { padding: 48px 0 80px; }
.galeria-intro { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.galeria-intro h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -1px; margin-bottom: 12px; }
.galeria-intro p { color: var(--texto-suave); font-size: 16.5px; }

.galeria-grelha {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 24px; align-items: start;
}
.modelo-card {
  background: var(--branco); border: 1px solid var(--borda); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.modelo-card .mini { margin: 0 auto; }
.modelo-card h3 { font-size: 17px; letter-spacing: -0.2px; }
.modelo-card .categoria { font-size: 12.5px; color: var(--texto-suave); }
.modelo-card .nota { font-size: 13px; color: var(--texto-suave); line-height: 1.5; text-align: center; }
.modelo-card .btn { width: 100%; text-align: center; }

.galeria-cor { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; font-size: 14px; color: var(--texto-suave); }
.galeria-cor input[type="color"] {
  width: 40px; height: 30px; border: 1px solid var(--borda);
  border-radius: 6px; cursor: pointer; background: #fff; padding: 2px;
}

.galeria-ats {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px;
  padding: 20px 24px; margin: 0 auto 32px; max-width: 820px; font-size: 14.5px; line-height: 1.6;
}
.galeria-ats h2 { font-size: 18px; margin-bottom: 8px; }
.galeria-ats ul { margin: 8px 0 0 20px; }
.galeria-ats li { margin-bottom: 4px; }

/* ============================================================
   SELECTOR DE MODELOS NO EDITOR
   ============================================================ */

.modal-largo { width: 1000px; }
.modal-largo .galeria-grelha { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 16px; }

.modelo-opcao {
  background: #fff; border: 2px solid var(--borda); border-radius: 10px;
  padding: 8px; cursor: pointer; font-family: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.modelo-opcao:hover { border-color: #cbd5e1; }
.modelo-opcao.activo { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29,78,216,.14); }
.modelo-opcao .nome { font-size: 14px; font-weight: 700; color: var(--texto); }
.modelo-opcao .selo { font-size: 10px; padding: 2px 7px; }
.modelo-opcao .mini { border-color: #eef2f7; }

.selector-vazio {
  text-align: center; color: var(--texto-suave); font-size: 14.5px;
  padding: 10px 0 18px;
}

/* ============================================================
   IMAGEM DE CABEÇALHO (controlos na gaveta de personalização)
   ============================================================ */

.imagem-previa {
  width: 100%; height: 74px; border-radius: 8px; border: 1px solid var(--borda);
  background-size: cover; background-position: center; margin-bottom: 10px;
}
.imagem-acoes { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.imagem-acoes .btn { flex: 1; }

.aviso-inline {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 9px 11px; font-size: 12.5px; line-height: 1.55; color: #78350f; margin-top: 8px;
}
.aviso-inline button {
  background: none; border: none; padding: 0; margin-top: 4px;
  color: #92400e; font-family: inherit; font-size: 12.5px; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}

@media screen and (max-width: 900px) {
  .modal-largo { width: 94vw; }
  .galeria-grelha { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
}

/* ============================================================
   VISOR DE MODELOS (pop-up de pré-visualização)
   ============================================================ */

body.sem-scroll { overflow: hidden; }

.visor { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.visor-fundo { position: absolute; inset: 0; background: rgba(15,23,42,.72); }

.visor-caixa {
  position: relative; z-index: 1;
  display: flex; align-items: stretch; gap: 26px;
  max-width: 1180px; width: 100%; padding: 24px;
  max-height: 100vh;
}

/* --- lado esquerdo: a folha --- */
.visor-folha { display: flex; flex-direction: column; align-items: center; gap: 10px; justify-content: center; }
.visor-folha .mini { border: none; box-shadow: 0 18px 60px rgba(0,0,0,.45); border-radius: 3px; }
.visor-legenda { color: rgba(255,255,255,.75); font-size: 13px; text-align: center; }

/* --- lado direito: a ficha do modelo --- */
.visor-ficha {
  width: 340px; flex-shrink: 0; background: var(--branco);
  border-radius: 14px; padding: 24px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 48px);
}
.visor-ficha-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.visor-ficha h2 { font-size: 24px; letter-spacing: -0.5px; }
.visor-meta { font-size: 13px; color: var(--texto-suave); margin-top: -8px; }
.visor-nota { font-size: 14.5px; line-height: 1.6; color: var(--texto); }
.visor-ficha h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--texto-suave); margin-top: 4px;
}
.visor-ideal { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.visor-ideal li { font-size: 14px; padding-left: 20px; position: relative; }
.visor-ideal li::before { content: "✓"; position: absolute; left: 0; color: #059669; font-weight: 700; }

.visor-ats { border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.55; }
.visor-ats.ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.visor-ats.aviso { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.visor-ats.criativo { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }

.visor-accoes { margin-top: auto; padding-top: 6px; }
.visor-accoes .btn { width: 100%; text-align: center; }
.visor-contagem { font-size: 12px; color: var(--texto-suave); text-align: center; margin-top: 10px; }

/* --- controlos --- */
.visor-fechar {
  position: absolute; top: 14px; right: 18px; z-index: 2;
  background: rgba(255,255,255,.14); border: none; color: #fff;
  width: 38px; height: 38px; border-radius: 50%; font-size: 24px; line-height: 1;
  cursor: pointer;
}
.visor-fechar:hover { background: rgba(255,255,255,.26); }

.visor-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(255,255,255,.14); border: none; color: #fff;
  width: 46px; height: 66px; border-radius: 10px;
  font-size: 32px; line-height: 1; cursor: pointer;
}
.visor-nav:hover:not(:disabled) { background: rgba(255,255,255,.26); }
.visor-nav:disabled { opacity: .3; cursor: default; }
.visor-ant { left: 14px; }
.visor-seg { right: 14px; }

/* cartões e opções ficam clicáveis de forma óbvia */
.modelo-card.clicavel { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.modelo-card.clicavel:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.1); }
.modelo-card .ver-maior { font-size: 12.5px; color: var(--azul); font-weight: 600; }

@media screen and (max-width: 900px) {
  .visor-caixa { flex-direction: column; align-items: center; gap: 14px; padding: 56px 12px 12px; overflow-y: auto; }
  .visor-ficha { width: 100%; max-width: 520px; max-height: none; }
  .visor-nav { top: auto; bottom: 14px; transform: none; width: 44px; height: 44px; font-size: 26px; }
  .visor-ant { left: 12px; }
  .visor-seg { right: 12px; }
  .visor-accoes { margin-top: 8px; }
}

/* ============================================================
   PERFIS (vários currículos no mesmo navegador)
   ============================================================ */

.lista-perfis { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.perfil-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; background: #fff;
}
.perfil-item.activo { border-color: var(--azul); background: #f5f9ff; }
.perfil-item input[type="radio"] { width: 18px; height: 18px; accent-color: var(--azul); cursor: pointer; flex-shrink: 0; }
.perfil-meio { flex: 1; min-width: 0; }
.perfil-meio input[type="text"] {
  width: 100%; border: 1px solid transparent; background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--texto);
  padding: 3px 6px; border-radius: 5px;
}
.perfil-meio input[type="text"]:hover { border-color: var(--borda); background: #fff; }
.perfil-meio input[type="text"]:focus { outline: 2px solid var(--azul); outline-offset: -1px; background: #fff; }
.perfil-data { display: block; font-size: 12px; color: var(--texto-suave); padding-left: 6px; }
.perfis-accoes { display: flex; gap: 8px; margin-bottom: 12px; }
.perfis-accoes .btn { flex: 1; }
.perfis-accoes .btn:disabled { opacity: .45; cursor: default; }

#sel-perfil { max-width: 190px; }

/* ============================================================
   CARTA DE APRESENTAÇÃO
   ============================================================ */

/* a carta usa a mesma folha A4 e os mesmos modelos do currículo */
.carta-sheet.estr-topo .cv-conteudo { padding: 0; }
.carta-sheet .cv-body { display: block; }

.carta-corpo { padding-top: var(--gap-sec); font-size: 10.5pt; }
.carta-corpo p { margin-bottom: 3.5mm; text-align: justify; hyphens: auto; }
.carta-corpo p:first-of-type { margin-bottom: 4.5mm; }

.carta-topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10mm; margin-bottom: var(--gap-sec);
}
.carta-destino { font-size: 10pt; line-height: 1.45; }
.carta-destino strong { display: block; }
.carta-destino span { display: block; color: #4b5563; }
.carta-data { font-size: 10pt; color: #4b5563; white-space: nowrap; text-align: right; }

.carta-fecho { margin-top: 6mm; }
.carta-fecho p { margin-bottom: 2mm; text-align: left; }
.carta-assinatura {
  font-weight: 700; font-size: 11.5pt; color: var(--accent);
  margin-top: 8mm !important;
}
.carta-vazia { color: #9ca3af; text-align: center !important; padding: 20mm 10mm; }

/* --- controlos do editor da carta --- */
.carta-gerar {
  border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 10px;
  padding: 14px; margin-bottom: 12px;
}
.carta-gerar .btn { width: 100%; }
.carta-gerar .grupo-nota { margin-top: 8px; margin-bottom: 0; }

.carta-medidor {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--texto-suave); margin-top: 6px;
}
.carta-medidor .aviso { color: #b45309; font-weight: 600; }
.carta-medidor .bom { color: #059669; font-weight: 600; }

#ctl-perfil { white-space: nowrap; }
#ctl-perfil strong { color: var(--texto); }

/* na carta, o corpo do texto ocupa o espaço todo */
#c-corpo { min-height: 240px; line-height: 1.6; }

/* ============================================================
   COMPARAÇÃO COM UM ANÚNCIO DE EMPREGO
   ============================================================ */

#vaga-texto {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px;
  font-family: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; color: var(--texto);
}
#vaga-texto:focus { outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul); }

.vaga-accoes { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.vaga-accoes .btn { flex: 1; }

.vaga-titulo {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--texto-suave); margin: 16px 0 8px;
}
.vaga-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip {
  display: inline-block; font-size: 12.5px; padding: 4px 10px; border-radius: 99px;
  border: 1px solid transparent;
}
.chip.falta { background: #fffbeb; border-color: #fde68a; color: #78350f; font-weight: 600; }
.chip.tem { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

/* --- sugestão de começar por um exemplo --- */
.dica-comecar {
  background: #fefce8; border: 1px solid #fde68a; border-radius: 8px;
  padding: 11px 13px; font-size: 13px; line-height: 1.55; color: #78350f;
  margin-bottom: 14px;
}
.dica-comecar a { display: block; margin-top: 6px; color: #92400e; font-weight: 700; }

/* --- perguntas frequentes (landing) --- */
.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq details {
  background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; padding: 4px 18px;
}
.faq summary {
  cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 16.5px;
  list-style: none; position: relative; padding-right: 28px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 12px;
  font-size: 22px; color: var(--texto-suave); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 16px; color: var(--texto-suave); font-size: 15.5px; line-height: 1.65; }

/* ============================================================
   TELEMÓVEL — camada final
   Escrita no fim de propósito: sobrepõe-se a tudo o que vem
   acima sem precisar de !important.
   ============================================================ */

/* --- alturas: as barras dos browsers móveis mudam de tamanho a
   meio do scroll; dvh acompanha, vh não --- */
@supports (height: 100dvh) {
  .pagina-cv { min-height: 100dvh; }
  .visor-caixa { max-height: 100dvh; }
  .visor-ficha { max-height: calc(100dvh - 48px); }
}

@media screen and (max-width: 900px) {

  /* ---------- nada deve empurrar a página para o lado ----------
     «clip» em vez de «hidden»: hidden cria um contentor de scroll
     e estraga o position:sticky do cabeçalho */
  html, body { max-width: 100%; }
  body { overflow-x: hidden; }
  @supports (overflow: clip) { body { overflow-x: clip; } }

  /* ---------- navegação do site ----------
     Sem JavaScript, as ligações ficam à vista em várias linhas.
     Com JavaScript, passam para o menu hamburguer (ver abaixo). */
  .site-header .header-inner { height: auto; padding: 10px 0; flex-wrap: wrap; gap: 8px; }
  .site-header .logo { flex: 0 0 auto; margin-right: auto; }
  .site-nav { flex-wrap: wrap; gap: 8px 14px; }
  .site-nav a:not(.btn) {
    display: flex; align-items: center; min-height: 40px; font-size: 14.5px;
  }

  /* ---------- campos: 16px evita o zoom automático do iOS ---------- */
  .fields input, .fields textarea, .fields select,
  .control select, .grupo-linha select, .seccao-item input,
  .perfil-meio input[type="text"], .link-caixa input,
  #vaga-texto, #c-corpo {
    font-size: 16px;
  }
  .fields input[type="file"] { font-size: 15px; }
  .control input[type="color"] { width: 46px; height: 40px; }

  /* ---------- alvos de toque com pelo menos 44px ---------- */
  .btn, .btn-sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-link { min-height: 40px; display: flex; align-items: center; }
  .lang-tab, .segmentos button, .filtro { min-height: 44px; }
  .seccao-mover { width: 40px; height: 40px; font-size: 14px; }
  .paleta { width: 40px; height: 40px; }
  .item-remove { width: 40px; height: 40px; top: 2px; right: 2px; font-size: 20px; }
  .form-section summary { padding: 16px 14px; }
  .faq summary { padding: 18px 0; }
  .rgpd-close { width: 40px; height: 40px; top: 0; right: 0; }
  .gaveta-fechar { width: 44px; height: 44px; }
  button, .btn, summary { touch-action: manipulation; }

  /* ---------- barra superior do editor ----------
     Sem JavaScript, os controlos ficam à vista em várias linhas.
     Com JavaScript, vão para o menu hamburguer. */
  .editor-topbar { gap: 8px 10px; padding: 8px 12px; align-items: center; }
  .editor-topbar > .logo { flex: 0 0 auto; margin-right: auto; }
  .editor-topbar .control select { max-width: 100%; }
  /* com a barra de baixo, o botão de PDF aqui em cima é redundante */
  body.mobile-app .editor-topbar #btn-imprimir { display: none; }

  /* ============================================================
     MENU HAMBURGUER
     ============================================================ */

  .menu-hamburguer {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px; flex: 0 0 auto;
    background: var(--branco); color: var(--texto);
    border: 1px solid var(--borda); border-radius: 10px;
    font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  }
  .menu-hamburguer:hover { background: #f8fafc; border-color: #cbd5e1; }
  .menu-texto { line-height: 1; }

  /* três traços que viram cruz quando o menu abre */
  .menu-barras, .menu-barras::before, .menu-barras::after {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: var(--texto); transition: transform .2s ease, opacity .15s ease;
  }
  .menu-barras { position: relative; }
  .menu-barras::before, .menu-barras::after { content: ""; position: absolute; left: 0; }
  .menu-barras::before { top: -6px; }
  .menu-barras::after { top: 6px; }
  body.menu-aberto .menu-barras { background: transparent; }
  body.menu-aberto .menu-barras::before { transform: translateY(6px) rotate(45deg); }
  body.menu-aberto .menu-barras::after { transform: translateY(-6px) rotate(-45deg); }

  .menu-fundo {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(15, 23, 42, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  body.menu-aberto .menu-fundo { opacity: 1; pointer-events: auto; }

  /* o cabeçalho fica por cima do painel: assim o botão de fechar
     continua à vista e o painel esconde-se atrás dele */
  .site-header, .editor-topbar { position: sticky; top: 0; z-index: 101; }

  .menu-painel {
    position: fixed; z-index: 100; left: 0; right: 0; top: 0;
    max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 8px;
    transform: translateY(-102%); transition: transform .22s ease;
  }
  body.menu-aberto .menu-painel { transform: translateY(0); }

  /* o PDF já está na barra de baixo — não precisa de estar duas vezes */
  body.mobile-app .menu-painel #btn-imprimir { display: none; }

  .menu-titulo {
    font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--texto-suave); font-weight: 700; margin-bottom: 2px;
  }

  /* os grupos movidos para dentro do menu empilham-se */
  .menu-painel .topbar-controls,
  .menu-painel .topbar-actions,
  .menu-painel .site-nav {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 8px; width: 100%; flex: none;
  }
  .menu-painel .topbar-actions { border-top: 1px solid var(--borda); padding-top: 10px; margin-top: 2px; }

  .menu-painel .control {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; min-height: 48px; font-size: 15px; color: var(--texto);
    border: 1px solid var(--borda); border-radius: 10px; padding: 0 14px;
  }
  .menu-painel .control select { max-width: 58%; min-height: 40px; }
  .menu-painel .control input[type="color"] { width: 52px; height: 40px; }

  .menu-painel .btn {
    width: 100%; justify-content: flex-start; min-height: 48px;
    font-size: 15px; text-align: left;
  }
  .menu-painel .site-nav a:not(.btn) {
    min-height: 50px; font-size: 16px; font-weight: 600;
    border-bottom: 1px solid var(--borda); padding: 0 2px;
  }
  .menu-painel .site-nav a:not(.btn):last-of-type { border-bottom: none; }

  /* com o menu montado, o cabeçalho fica só com o essencial */
  body.tem-menu .editor-topbar,
  body.tem-menu .site-header .header-inner { flex-wrap: nowrap; }
  body.tem-menu .site-header .header-inner > .btn-primary { flex: 0 0 auto; }

  /* ---------- corpo: um painel de cada vez ---------- */
  /* a altura tem de voltar: o layout empilhado deixa de ser usado */
  body.mobile-app.editor-page {
    height: 100vh; overflow: hidden;
    display: flex; flex-direction: column;
  }
  body.mobile-app .editor-layout {
    display: block; position: relative; flex: 1; min-height: 0;
  }
  body.mobile-app .form-panel,
  body.mobile-app .preview-panel {
    position: absolute; inset: 0; width: auto; min-width: 0;
    border: none; margin: 0;
  }
  body.mobile-app .form-panel { overflow-y: auto; padding: 14px 14px 90px; }
  body.mobile-app .preview-panel { display: none; }
  body.mobile-app.vista-ver .form-panel { display: none; }
  body.mobile-app.vista-ver .preview-panel { display: flex; }
  body.mobile-app .preview-scroll {
    overflow: auto; padding: 14px 10px 96px;
    align-items: flex-start; display: flex; flex-direction: column; gap: 20px;
  }
  body.mobile-app .sheet-wrap { margin: 0 auto; }

  /* ---------- barra fixa em baixo ---------- */
  .barra-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--branco); border-top: 1px solid var(--borda);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .08);
  }
  .segmentos-mobile { flex: 1; }
  .segmentos-mobile button { font-size: 14.5px; }
  .barra-mobile > .btn { flex: 0 0 auto; padding: 0 18px; }

  /* ---------- ampliação da folha ---------- */
  .zoom-mobile {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 20;
    display: none; align-items: center; gap: 4px;
    background: rgba(15, 23, 42, .88); border-radius: 99px; padding: 5px 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  }
  body.mobile-app.vista-ver .zoom-mobile,
  body.mobile-app.pagina-cv .zoom-mobile { display: flex; }
  .zoom-mobile button {
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #fff;
    font-size: 21px; line-height: 1; cursor: pointer; font-family: inherit;
  }
  .zoom-mobile button:disabled { opacity: .32; }
  .zoom-rotulo {
    color: #fff; font-size: 13px; font-weight: 600;
    min-width: 96px; text-align: center; font-variant-numeric: tabular-nums;
  }

  @supports (height: 100dvh) {
    body.mobile-app.editor-page { height: 100dvh; }
  }

  /* ---------- página pública partilhada ---------- */
  /* aqui a página rola toda, por isso os controlos ficam fixos ao ecrã */
  body.mobile-app.pagina-cv { padding-bottom: 78px; }
  body.mobile-app.pagina-cv .zoom-mobile {
    position: fixed; bottom: calc(88px + env(safe-area-inset-bottom));
  }
  .cv-publico-area { position: relative; overflow-x: auto; align-items: flex-start; }
  .cv-publico-topo .header-inner { padding: 8px 0; }
  .cv-publico-acoes { width: 100%; }
  .cv-publico-acoes .btn { flex: 1; }

  /* ---------- gavetas e modais ---------- */
  .gaveta { width: 100%; max-width: none; }
  .gaveta-corpo { padding: 14px 14px 24px; }
  .modal {
    width: 100%; max-width: 100%; max-height: 100%;
    top: 0; left: 0; transform: none; border-radius: 0;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
  }
  .modal.visivel { transform: none; }
  .modal-fechar { top: 10px; right: 10px; }
  .modal-largo { width: 100%; }
  .partilha-redes a { flex: 1 1 46%; justify-content: center; min-height: 44px; }
  .perfis-accoes { flex-direction: column; }

  /* ---------- visor em grande ---------- */
  .visor-caixa { padding: 56px 12px calc(80px + env(safe-area-inset-bottom)); }
  .visor-ficha { padding: 18px; }
  .visor-nav { bottom: calc(14px + env(safe-area-inset-bottom)); }

  /* ---------- galeria ---------- */
  .galeria { padding: 28px 0 60px; }
  .galeria-ats { padding: 16px 18px; }
  .galeria-cor { flex-wrap: wrap; }
}

/* ---------- telemóveis estreitos ---------- */
@media screen and (max-width: 420px) {
  .container { padding: 0 16px; }
  .galeria-grelha { grid-template-columns: 1fr; }
  .modelo-card { padding: 12px; }
  .barra-mobile { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .barra-mobile > .btn { padding: 0 14px; font-size: 13.5px; }
  .segmentos-mobile button { font-size: 13.5px; padding: 7px 2px; }
  .zoom-rotulo { min-width: 84px; font-size: 12.5px; }
  .editor-topbar { padding: 8px 10px; }
  .hero h1 { letter-spacing: -0.5px; }
  .feature { padding: 22px 18px; }
  .visor-ficha h2 { font-size: 21px; }
}

/* a barra de baixo e a de zoom nunca vão para o papel */
@media print {
  .barra-mobile, .zoom-mobile { display: none !important; }
}