/* ===== Tabuleiro Político — sistema de marca ===== */
@font-face{font-family:'Hepta Slab';src:url('assets/fonts/HeptaSlab-ExtraLight.ttf') format('truetype');font-weight:200;font-display:swap}
@font-face{font-family:'Hepta Slab';src:url('assets/fonts/HeptaSlab-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Hepta Slab';src:url('assets/fonts/HeptaSlab-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Hepta Slab';src:url('assets/fonts/HeptaSlab-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Hepta Slab';src:url('assets/fonts/HeptaSlab-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}

:root{
  --acc:#FFEA00; --ink:#16150F; --cream:#F4F1E8; --paper:#FBFAF4;
  --line:#E0DCCE; --line2:#D8D4C6; --line3:#DAD6C8;
  --muted:#6E6A5E; --muted2:#8A8578; --muted3:#A6A296;
  --shadow:4px 4px 0 #16150F;
  --slab:'Hepta Slab',Georgia,serif;
  --sans:'Helvetica Neue',Helvetica,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:#17160F;background:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.5}
::selection{background:#FFEA00}
@keyframes tpFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tpPulse{0%,100%{opacity:.4}50%{opacity:1}}
.tp-scroll::-webkit-scrollbar{width:9px}.tp-scroll::-webkit-scrollbar-thumb{background:#CFC9BA;border-radius:6px}
a{color:inherit}
h1,h2,h3{font-family:var(--slab);letter-spacing:-.02em;margin:0}
.slab{font-family:var(--slab)}
button{font:inherit}
input,select,textarea{font:inherit}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--acc);color:var(--ink);font-weight:600;font-size:15px;padding:15px 26px;border:1.5px solid var(--ink);border-radius:8px;cursor:pointer;box-shadow:var(--shadow);transition:transform .13s,box-shadow .13s;text-decoration:none}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{background:transparent;color:var(--muted2);font-weight:500;padding:14px 20px;border:1.5px solid var(--line3);box-shadow:none}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink);transform:none;box-shadow:none}
.btn-dark{background:var(--ink);color:var(--acc)}

/* fields */
.field{display:flex;flex-direction:column;gap:7px}
.field>span{font-size:12.5px;font-weight:600;color:#413E36}
.inp,.sel,.ta{font-size:14.5px;padding:12px 14px;border:1.5px solid var(--line2);border-radius:8px;background:#fff;outline:none;width:100%}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,234,0,.35)}
.ta{resize:vertical;min-height:66px;line-height:1.5}
.sel{cursor:pointer}
input[type=range]{width:100%;cursor:pointer;accent-color:var(--ink)}
.tag-tse{color:var(--acc);background:var(--ink);font-size:9px;padding:2px 6px;border-radius:8px;letter-spacing:.06em;vertical-align:middle}

.card{border:1.5px solid var(--line);border-radius:13px;background:var(--paper);padding:26px}
.kicker{font-size:12px;letter-spacing:.14em;color:var(--muted2);font-weight:600}
.muted{color:var(--muted2)}
.val-pill{font-family:var(--slab);font-weight:600;font-size:14px;background:var(--acc);border-radius:12px;padding:1px 11px}

/* ===== centered auth / marketing shells ===== */
.center-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.auth-card{width:100%;max-width:440px;background:#fff;border:1.5px solid var(--ink);border-radius:16px;box-shadow:var(--shadow);padding:38px 34px}
.brandmark{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.brandmark img{height:38px;width:auto}
.notice{border:1.5px solid var(--line);background:var(--paper);border-radius:10px;padding:14px 16px;font-size:13.5px;color:var(--muted)}
.err{background:#FBE3E0;border:1.5px solid #D9534F;color:#8f2f2b;border-radius:10px;padding:12px 15px;font-size:13.5px}
.ok{background:#E3F1E4;border:1.5px solid #4E7A52;color:#2f5a34;border-radius:10px;padding:12px 15px;font-size:13.5px}
.linklike{background:none;border:none;color:var(--ink);text-decoration:underline;cursor:pointer;padding:0;font-size:13.5px}

/* ===== hero ===== */
.hero{max-width:1080px;margin:0 auto;padding:64px 28px 80px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:600;background:#fff}
.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;margin:22px 0 18px}
.hl{background:var(--acc);padding:0 8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero p.lead{font-size:18px;color:var(--muted);max-width:640px;margin:0 0 34px}
.cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.cta-card{border:1.5px solid var(--ink);border-radius:14px;background:#fff;padding:24px;cursor:pointer;text-align:left;transition:transform .13s,box-shadow .13s;box-shadow:var(--shadow)}
.cta-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.cta-card .sq{width:34px;height:34px;border-radius:8px;background:var(--acc);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--slab);font-weight:600;margin-bottom:14px}
.cta-card h3{font-size:19px;margin-bottom:6px}
.cta-card p{font-size:13.5px;color:var(--muted2);margin:0}

/* ===== plataforma shell ===== */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.side{background:var(--ink);color:#F4F1E8;padding:22px 16px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .logo{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}
.side .logo img{height:30px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;border-radius:8px;padding:8px 10px;cursor:pointer;color:#B9B4A5;text-align:left}
.nav-item:hover{color:#F4F1E8}
.nav-item.active{background:rgba(255,234,0,.13);color:#F4F1E8}
.nav-badge{width:23px;height:23px;border-radius:5px;border:1.5px solid #3A362B;display:flex;align-items:center;justify-content:center;font-family:var(--slab);font-weight:600;font-size:11px;flex:none}
.nav-item.active .nav-badge{background:var(--acc);color:var(--ink);border-color:var(--acc)}
.main{overflow-y:auto;max-height:100vh;background:var(--cream)}
.topbar{position:sticky;top:0;z-index:5;background:rgba(244,241,232,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:12px 24px;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted2)}
.save-dot{width:8px;height:8px;border-radius:50%;background:#4E7A52}
.save-dot.saving{background:var(--acc)}
.mod-wrap{padding:36px 44px 72px;max-width:980px;animation:fade .35s ease both}
.mod-wrap.wide{max-width:1160px}
.mod-title{font-size:clamp(28px,4vw,36px);line-height:1.05;margin:6px 0 8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.section{border:1.5px solid var(--line);border-radius:13px;background:var(--paper);padding:26px;margin-bottom:20px}
.section h4{font-size:15px;margin-bottom:4px}
.foot-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.pill{display:inline-flex;align-items:center;gap:10px;border-radius:24px;padding:8px 16px;border:1.5px solid}
.dot{width:10px;height:10px;border-radius:50%}
.auto-box{display:flex;align-items:center;gap:11px;background:#F1EEE3;border:1.5px solid var(--line);border-radius:9px;padding:12px 15px}
.auto-box .z{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.chip{font-size:13px;padding:9px 15px;border-radius:20px;border:1.5px solid var(--line3);background:#fff;color:#413E36;cursor:pointer}
.chip.on{background:var(--acc);border-color:var(--ink);color:var(--ink);font-weight:600}
.chip.full{opacity:.4;cursor:not-allowed}
.arq{font-size:12.5px;padding:11px 6px;border-radius:8px;border:1.5px solid var(--line3);background:#fff;color:#413E36;cursor:pointer;text-align:center}
.arq.on{background:var(--ink);border-color:var(--ink);color:var(--acc);font-weight:600}
.photo-slot{width:150px;height:186px;border:1.5px solid var(--line2);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted3);cursor:pointer;overflow:hidden;position:relative;text-align:center}
.photo-slot img{width:100%;height:100%;object-fit:cover}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.spinner{width:18px;height:18px;border:2.5px solid rgba(22,21,15,.2);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:820px){.cta-grid{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.mod-wrap{padding:24px 18px 60px}
  #plHam{display:inline-flex !important;align-items:center;justify-content:center}
  #plSide{position:fixed !important;left:0;top:0;z-index:40;transform:translateX(-100%);transition:transform .25s ease;box-shadow:8px 0 24px rgba(0,0,0,.35)}
  #plSide.open{transform:translateX(0)}
  .tp-split{flex-direction:column !important;height:auto !important;min-height:100vh;overflow:visible !important}
  .tp-splitcontent{padding:28px 24px !important;overflow:visible !important}
  .tp-brand{width:100% !important;padding:28px 24px !important}
  .tp-onbsplit{flex-direction:column !important;overflow-y:auto !important}
  .tp-onbcontent{padding:28px 24px !important;max-width:100% !important}
}