@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Montserrat';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/nunito-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Playfair Display';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/playfair-display-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Playfair Display';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/playfair-display-latin-700-normal.woff2) format('woff2');}

:root{
  --ink:#311572;
  --accent:#7c3aed;
  --accent-2:#6d28d9;
  --accent-soft:#f3edff;
  --accent-line:#d9c8fb;
  --bg:#ffffff;
  --panel:#f7f6fb;
  --line:#e7e5ef;
  --text:#1d1b26;
  --muted:#6b6880;
  --warn-bg:#fff7ed;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --head:'Montserrat',var(--sans);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.45;-webkit-text-size-adjust:100%;}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;}
.hidden{display:none !important;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* topo */
.top{border-bottom:1px solid var(--line);background:#fff;}
.top-in{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.brand-mark{width:30px;height:30px;display:block;}
.brand-name{font-family:var(--head);font-size:20px;font-weight:400;letter-spacing:-0.01em;}
.brand-name b{font-weight:700;color:var(--accent);}
.top-link{font-size:13px;color:var(--muted);text-decoration:none;}
.top-link:hover{color:var(--accent);}

/* hero */
.hero{text-align:center;padding-top:44px;padding-bottom:30px;}
.hero h1{font-family:var(--head);font-weight:700;font-size:clamp(28px,4.6vw,46px);letter-spacing:-0.025em;line-height:1.1;margin:0 0 12px;color:var(--ink);}
.hero .grad{background:linear-gradient(100deg,#8c5fee,#7c3aed 45%,#311572);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{max-width:600px;margin:0 auto;color:var(--muted);font-size:16px;}
.badges{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.badges li{font-size:12px;font-weight:600;color:var(--accent-2);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:99px;padding:5px 12px;}
.noscript{padding:20px 24px;color:#b45309;}

/* grade */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:28px;align-items:start;padding-bottom:56px;}
.col-left{display:flex;flex-direction:column;gap:20px;min-width:0;}
.col-right{position:sticky;top:20px;align-self:start;}

.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 1px 2px rgba(49,21,114,.04),0 8px 28px rgba(49,21,114,.05);}
.card h2{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;display:flex;align-items:center;gap:10px;}
.num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:99px;background:var(--accent);color:#fff;font-size:11px;letter-spacing:0;}
.card h3{font-size:13px;font-weight:700;color:var(--text);margin:20px 0 10px;}
.card h3:first-of-type{margin-top:0;}
.lbl{font-size:12px;color:var(--muted);margin-bottom:6px;}
.hint{font-size:11.5px;color:var(--muted);line-height:1.5;margin:6px 0 12px;}

/* campos */
.field{margin-bottom:12px;}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;}
.field input[type=text],.field textarea,.field select{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:14px;
  font-family:var(--sans);background:var(--panel);color:var(--text);transition:.12s;
}
.field textarea{resize:vertical;min-height:72px;line-height:1.4;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(124,58,237,.14);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.row2 > *{min-width:0;}
.panel{display:none;margin-top:18px;}
.panel.on{display:block;}

/* abas e segmentados */
.tabs{display:flex;gap:4px;overflow-x:auto;padding:5px;background:var(--panel);border-radius:14px;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs .opt{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 8px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.12s;}
.tabs .opt svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.tabs .opt:hover{color:var(--text);}
.tabs .opt.active{background:#fff;color:var(--accent-2);border-color:var(--accent-line);box-shadow:0 1px 3px rgba(49,21,114,.1);}

.seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.seg .opt{flex:1 1 auto;text-align:center;padding:10px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s;}
.seg .opt:hover{border-color:#cfcbe0;color:var(--text);}
.seg .opt.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);}
.seg.two .opt{flex:1 1 40%;}
.seg.icons{display:grid;grid-template-columns:repeat(5,1fr);}
.seg.icons .opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 9px;font-size:11.5px;}
.seg.icons .opt svg{width:30px;height:30px;display:block;}

.presets{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.preset{border:1px solid var(--line);border-radius:12px;background:#fff;padding:9px 6px 7px;cursor:pointer;text-align:center;font-size:11.5px;font-weight:600;color:var(--muted);transition:.12s;}
.preset:hover{border-color:#cfcbe0;}
.preset.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);}
.preset svg{width:100%;height:auto;max-width:62px;display:block;margin:0 auto 6px;}

/* sliders e cores */
.rng{margin:2px 0 14px;}
.rng .top{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px;}
.rng .rv{font-family:var(--mono);color:var(--text);}
input[type=range]{width:100%;accent-color:var(--accent);margin:0;}
.dim{opacity:.4;pointer-events:none;}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;margin:4px 0 12px;cursor:pointer;}
.check input{accent-color:var(--accent);width:16px;height:16px;margin:0;}
.color-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:10px;}
.color-row input[type=color]{width:46px;height:30px;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer;padding:2px;}

/* logo */
.upload{border:2px dashed var(--line);border-radius:12px;padding:20px;text-align:center;cursor:pointer;font-size:13px;color:var(--muted);transition:.15s;}
.upload:hover,.upload.dragover{border-color:var(--accent);background:var(--accent-soft);color:var(--text);}
.uz-link{color:var(--accent-2);text-decoration:underline;}
.logo-prev{display:none;align-items:center;gap:12px;}
.logo-prev.on{display:flex;}
.thumb{width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--panel);border:1px solid var(--line);flex:0 0 52px;}
.thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.logo-meta{font-size:13px;min-width:0;}
.logo-meta div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px;}
.link-btn{background:none;border:none;color:var(--muted);text-decoration:underline;font-size:12px;cursor:pointer;padding:0;}
#logoSizeRow{margin-top:14px;}

/* seta de posição */
.dirpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,auto);gap:6px;margin-bottom:6px;}
.dirpad .opt{padding:10px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s;}
.dirpad .opt:hover{border-color:#cfcbe0;color:var(--text);}
.dirpad .opt.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);}
.d-top{grid-column:2;grid-row:1;}.d-left{grid-column:1;grid-row:2;}.d-right{grid-column:3;grid-row:2;}.d-bottom{grid-column:2;grid-row:3;}
.d-mid{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;font-size:12px;letter-spacing:.08em;}

/* avançado */
.adv{padding:0;}
.adv summary{cursor:pointer;padding:18px 24px;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);list-style:none;display:flex;justify-content:space-between;align-items:center;}
.adv summary::-webkit-details-marker{display:none;}
.adv summary::after{content:"+";font-size:18px;font-weight:400;letter-spacing:0;color:var(--accent);}
.adv[open] summary::after{content:"–";}
.adv-body{padding:0 24px 24px;}

/* botões */
.btn{padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);font-weight:700;font-size:14px;cursor:pointer;transition:.12s;}
.btn:hover:not(:disabled){border-color:#cfcbe0;background:var(--panel);}
.btn:disabled{opacity:.4;cursor:default;}
.btn.primary{background:linear-gradient(135deg,#8c5fee,#7c3aed 55%,#6d28d9);border-color:transparent;color:#fff;font-family:var(--head);box-shadow:0 6px 16px rgba(124,58,237,.28);}
.btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#8c5fee,#6d28d9);}
.btn.wide{width:100%;margin-top:10px;}
.btn.ghost{width:100%;margin-top:6px;font-weight:600;color:var(--muted);}

/* preview fixo */
.preview-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 1px 2px rgba(49,21,114,.04),0 18px 44px rgba(49,21,114,.1);}
.ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px;}
.ph b{font-family:var(--head);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.ph span{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.stage{border-radius:14px;background:#fff;border:1px solid var(--line);padding:16px;display:flex;align-items:center;justify-content:center;min-height:240px;margin-bottom:14px;}
.stage.checker{background-color:#fff;background-image:linear-gradient(45deg,#ededf1 25%,transparent 25%,transparent 75%,#ededf1 75%),linear-gradient(45deg,#ededf1 25%,transparent 25%,transparent 75%,#ededf1 75%);background-size:18px 18px;background-position:0 0,9px 9px;}
#preview{width:100%;display:flex;justify-content:center;}
#preview svg{display:block;width:100%;height:auto;max-height:calc(100vh - 380px);min-height:200px;}
.empty-note{font-size:13px;color:var(--muted);padding:30px 10px;text-align:center;}
.warn{display:none;font-size:12px;color:#b45309;background:var(--warn-bg);border:1px solid #fed7aa;border-radius:10px;padding:9px 12px;margin-bottom:12px;line-height:1.5;}
.warn.on{display:block;}
.dl-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;}
.final-info{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;}
.progress{font-family:var(--mono);font-size:11px;color:var(--accent-2);margin-top:6px;min-height:14px;text-align:center;}
.tip{font-size:11.5px;color:var(--muted);text-align:center;margin:8px 0 0;line-height:1.5;}

/* barra de progresso */
.loader{position:fixed;right:16px;bottom:16px;width:280px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(49,21,114,.2);padding:12px 14px;z-index:9999;display:none;font-family:var(--mono);font-size:11px;color:var(--text);}
.loader.show{display:block;}
.ld-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;}
.ld-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ld-bar{height:8px;background:var(--accent-soft);border-radius:99px;overflow:hidden;}
.ld-fill{height:100%;width:0;background:linear-gradient(90deg,#8c5fee,#7c3aed);border-radius:99px;transition:width .15s;}

/* FAQ */
.faq{max-width:820px;padding-bottom:56px;}
.faq h2{font-family:var(--head);font-size:22px;color:var(--ink);letter-spacing:-.01em;margin:0 0 16px;}
.faq details{border:1px solid var(--line);border-radius:14px;padding:0 18px;margin-bottom:10px;background:#fff;}
.faq summary{cursor:pointer;padding:15px 0;font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.6;}

/* rodapé (assinatura) */
.foot{border-top:1px solid var(--line);background:var(--panel);padding:36px 0;}
.foot-in{display:flex;align-items:center;gap:32px;}
.foot-logo{flex:0 0 auto;display:block;}
.foot-logo img{display:block;width:200px;height:auto;}
.foot-text{font-size:12.5px;color:var(--muted);line-height:1.6;}
.foot-text p{margin:0 0 6px;}
.foot-text b{color:var(--ink);}
.foot-text .small{font-size:11.5px;}

/* celular */
@media (max-width:980px){
  .wrap{padding:0 16px;}
  .hero{padding-top:28px;padding-bottom:20px;}
  .grid{grid-template-columns:1fr;gap:16px;}
  .col-right{order:-1;position:sticky;top:0;z-index:30;margin:0 -16px;}
  .preview-card{border-radius:0 0 18px 18px;padding:12px 14px;box-shadow:0 10px 26px rgba(49,21,114,.14);border-top:none;
    display:grid;grid-template-columns:minmax(0,42%) 1fr;grid-template-areas:"stage dl" "stage copy" "warn warn";gap:8px 12px;align-items:center;}
  .ph,.tip,.final-info,.progress{display:none;}
  .stage{grid-area:stage;min-height:0;padding:6px;margin:0;}
  #preview svg{max-height:24vh;min-height:0;}
  .dl-row{grid-area:dl;grid-template-columns:1fr 1fr;}
  .dl-row .primary{grid-column:1 / -1;}
  #copyBtn{grid-area:copy;margin-top:0;}
  .warn{grid-area:warn;margin:0;}
  .btn{padding:11px 10px;font-size:13.5px;}
  .presets{grid-template-columns:repeat(3,1fr);}
  .card{padding:18px;border-radius:16px;}
  .foot-in{flex-direction:column;align-items:flex-start;gap:18px;}
  .top-link{display:none;}
}
@media (max-width:520px){
  .row2{grid-template-columns:1fr;}
  .seg.icons{grid-template-columns:repeat(5,minmax(0,1fr));}
  .seg.icons .opt{font-size:10px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important;}}
