/* ===========================================================
   LandingPro — identidade visual configurável
   3 climas (data-cor: escuro/claro/neutro) x 3 estilos de fonte
   (data-fonte) x 3 fundos de decoração (data-fundo), escolhidos
   pelo próprio cliente no painel — sem precisar de ninguém pra
   deixar a página com boa cara.
   =========================================================== */

:root{
  --bg:#101010; --surface:#1B1B1B; --surface-2:#232323; --ink:#F5F5EF; --ink-invert:#101010;
  --muted:#9A9A8E; --line:#2B2B27; --accent:#FF7A1A; --accent-ink:#101010; --shadow: rgba(0,0,0,0.5);
}

/* ---------- 3 CLIMAS: escuro / claro / neutro ----------
   Seletor por atributo (sem exigir a tag body) pra também poder
   ser aplicado num elemento contido, como a prévia do painel. */
[data-cor="escuro"]{
  --bg:#101010; --surface:#1B1B1B; --surface-2:#232323; --ink:#F5F5EF; --ink-invert:#101010;
  --muted:#9A9A8E; --line:#2B2B27; --accent:#FF7A1A; --accent-ink:#101010;
}
[data-cor="claro"]{
  --bg:#FAFAF9; --surface:#FFFFFF; --surface-2:#F1F1EE; --ink:#14151A; --ink-invert:#FFFFFF;
  --muted:#6B7280; --line:#E5E5E0; --accent:#2E86FF; --accent-ink:#FFFFFF;
}
[data-cor="neutro"]{
  --bg:#F1EDE6; --surface:#FBF9F6; --surface-2:#E8E2D8; --ink:#2B2620; --ink-invert:#FBF9F6;
  --muted:#8A8072; --line:#DED5C6; --accent:#C2542D; --accent-ink:#FBF9F6;
}

/* ---------- ESTILOS DE FONTE ---------- */
[data-fonte="moderno"]{ --font-head:'Anton',sans-serif; --font-body:'Archivo',Arial,sans-serif; --head-transform:uppercase; --head-weight:400; --head-tracking:0.01em; }
[data-fonte="elegante"]{ --font-head:'Playfair Display',serif; --font-body:'Inter',Arial,sans-serif; --head-transform:none; --head-weight:700; --head-tracking:0; }
[data-fonte="clean"]{ --font-head:'Poppins',Arial,sans-serif; --font-body:'Poppins',Arial,sans-serif; --head-transform:none; --head-weight:700; --head-tracking:-0.01em; }

/* ---------- FUNDOS DE DECORAÇÃO (página pública — cobre a tela toda) ---------- */
body[data-fundo="gradiente"]{ position:relative; }
body[data-fundo="gradiente"]::before{
  content:""; position:fixed; inset:-15%; z-index:-1; pointer-events:none; filter:blur(60px);
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 88% 85%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 45%);
}
body[data-fundo="padrao"]{ position:relative; background-image:radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1.4px, transparent 1.4px); background-size:24px 24px; }

/* ---------- PAINEL ADMIN — sempre claro e limpo, independente do tema do cliente ---------- */
body.admin-shell{
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#F1F2F5; --ink:#14151A; --ink-invert:#FFFFFF;
  --muted:#6B7280; --line:#E7E8EC; --accent:#FF7A1A; --accent-ink:#FFFFFF; --shadow:rgba(20,21,26,0.08);
  --font-head:'Inter',Arial,sans-serif; --font-body:'Inter',Arial,sans-serif;
  --head-transform:none; --head-weight:700; --head-tracking:-0.01em;
}
body.admin-shell .topbar{ background:var(--surface); box-shadow:0 1px 0 var(--line); }
body.admin-shell .tab-btn{ background:var(--surface-2); border-color:transparent; color:#4B4F58; }
body.admin-shell .tab-btn.active{ box-shadow:0 4px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
body.admin-shell .card, body.admin-shell .form-grid, body.admin-shell .list-item{ box-shadow:0 1px 2px rgba(20,21,26,0.04), 0 1px 8px rgba(20,21,26,0.04); }
body.admin-shell .swatch{ background:var(--surface); }

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased;}
h1,h2,h3{ font-family:var(--font-head); text-transform:var(--head-transform); font-weight:var(--head-weight); letter-spacing:var(--head-tracking); margin:0 0 12px; }
a{ color:inherit; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border:none; padding:14px 24px; border-radius:10px; font-weight:800; cursor:pointer; font-family:var(--font-body); font-size:0.95rem; text-decoration:none; display:inline-block; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-secondary{ background:transparent; color:var(--ink); border:1.5px solid var(--line); padding:12px 20px; border-radius:10px; font-weight:700; cursor:pointer; font-family:var(--font-body); text-decoration:none; display:inline-block; }
.btn-danger{ background:transparent; color:#E0473E; border:1.5px solid #E0473E; padding:9px 16px; border-radius:8px; font-weight:700; cursor:pointer; font-family:var(--font-body); }
.hint{ color:var(--muted); font-size:0.85rem; line-height:1.5; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; }

/* ---------- LOGIN ---------- */
.auth-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.auth-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:36px; width:100%; max-width:420px; }
.auth-card h1{ font-size:1.8rem; }
.auth-form{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.auth-form label{ display:flex; flex-direction:column; gap:6px; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); }
.auth-form input{ padding:12px; border:1px solid var(--line); border-radius:8px; font-size:1rem; min-height:44px; background:var(--bg); color:var(--ink); font-family:var(--font-body); }
.auth-card hr{ border:none; border-top:1px solid var(--line); margin:24px 0; }

/* ---------- PAINEL ADMIN ---------- */
.topbar{ display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px; position:sticky; top:0; background:var(--bg); z-index:20; }
.brand-name{ font-family:var(--font-head); text-transform:var(--head-transform); font-size:1.3rem; }
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab-btn{ background:transparent; border:1px solid var(--line); color:var(--muted); padding:9px 16px; border-radius:999px; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:0.8rem; }
.tab-btn.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
#logoutBtn{ border-color:#E0473E; color:#E0473E; }
.content{ max-width:960px; margin:0 auto; padding:24px 20px 80px; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; background:var(--surface); border:1px solid var(--line); padding:18px; border-radius:14px; }
.form-grid label{ display:flex; flex-direction:column; gap:6px; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); }
.form-grid input, .form-grid select, .form-grid textarea{ padding:12px; border:1px solid var(--line); border-radius:8px; font-size:1rem; font-family:var(--font-body); background:var(--bg); color:var(--ink); min-height:44px; }
.list{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.list-item{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ border:2px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; width:120px; }
.swatch.selected{ border-color:var(--accent); }
.swatch .dot{ width:32px; height:32px; border-radius:50%; }
.swatch .label{ font-size:0.78rem; font-weight:700; }
.font-preview{ font-size:1.4rem; }

/* ---------- PRÉVIA DE APARÊNCIA (mockup contido no painel) ----------
   Recebe data-cor/data-fonte/data-fundo direto nela (não no body,
   que fica sempre claro/admin) pra mostrar como a página pública fica. */
#previewInner{ background:var(--bg); color:var(--ink); font-family:var(--font-body); position:relative; overflow:hidden; transition:background .2s ease, color .2s ease; }
#previewTag{ background:var(--accent); color:var(--accent-ink); position:relative; z-index:1; }
#previewTitulo{ font-family:var(--font-head); text-transform:var(--head-transform); font-weight:var(--head-weight); letter-spacing:var(--head-tracking); color:var(--ink); position:relative; z-index:1; }
#previewTexto{ color:var(--muted); position:relative; z-index:1; }
#previewBtn{ background:var(--accent); color:var(--accent-ink); position:relative; z-index:1; }
#previewInner[data-fundo="gradiente"]::before{
  content:""; position:absolute; inset:-30%; z-index:0; pointer-events:none; filter:blur(24px);
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 50%);
}
#previewInner[data-fundo="padrao"]{ background-image:radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1.2px, transparent 1.2px); background-size:14px 14px; }

/* ---------- PÁGINA PÚBLICA ---------- */
.lp-hero{ position:relative; min-height:70vh; display:flex; align-items:flex-end; overflow:hidden; }
.lp-hero-photo{ position:absolute; inset:0; background-size:cover; background-position:center; }
.lp-hero-fade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 50%, var(--bg) 100%); }
.lp-hero-content{ position:relative; z-index:1; padding:60px 24px; max-width:800px; margin:0 auto; text-align:center; width:100%; }
.lp-hero-content h1{ font-size:clamp(2.2rem,6vw,4rem); }
.lp-hero-content p{ font-size:1.15rem; color:var(--ink); opacity:0.9; margin-bottom:24px; }
.lp-portfolio{ max-width:1100px; margin:0 auto; padding:60px 24px; }
.lp-portfolio h2{ text-align:center; font-size:2rem; margin-bottom:36px; }
.lp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.lp-item{ background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.lp-item-foto{ width:100%; aspect-ratio:4/3; background:var(--surface-2) center/cover no-repeat; }
.lp-item-body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.lp-item-nome{ font-family:var(--font-head); font-weight:var(--head-weight); font-size:1.1rem; }
.lp-item-preco{ font-size:1.3rem; font-weight:800; color:var(--accent); }
.lp-item-desc{ color:var(--muted); font-size:0.9rem; line-height:1.5; flex:1; }
.lp-footer{ text-align:center; padding:40px 24px; color:var(--muted); font-size:0.85rem; }
.lp-whats-flutuante{ position:fixed; bottom:20px; right:20px; background:var(--accent); color:var(--accent-ink); width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; text-decoration:none; box-shadow:0 8px 24px var(--shadow); z-index:50; }

@media (max-width:640px){
  .topbar{ flex-direction:column; align-items:flex-start; }
}

/* ---------- UPLOAD DE IMAGEM COM DICA VISUAL (hover) ---------- */
.upload-imagem{
  position:relative; cursor:pointer; border-radius:14px; overflow:hidden;
  background:var(--surface-2) center/cover no-repeat; border:1.5px dashed var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  transition:border-color .15s ease;
}
.upload-imagem:hover{ border-color:var(--accent); }
.upload-imagem.capa{ width:100%; aspect-ratio:16/7; }
.upload-imagem.logo{ width:120px; height:120px; border-radius:50%; }
.upload-imagem.item{ width:100%; aspect-ratio:4/3; }
.upload-imagem input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.upload-imagem .upload-vazio{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:0.78rem; text-align:center; padding:10px; pointer-events:none; }
.upload-imagem .upload-vazio .ico{ font-size:1.6rem; }
.upload-imagem .upload-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,0.55); color:#fff; opacity:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  transition:opacity .15s ease; pointer-events:none; font-size:0.82rem; font-weight:700;
}
.upload-imagem:hover .upload-overlay{ opacity:1; }
.upload-imagem .upload-overlay .ico{ font-size:1.4rem; }