/* ==========================================================================
   style.css — Gerador de Artes para Pequenos Negócios
   ========================================================================== */

:root {
  --ink: #241b2e;
  --ink-soft: #6b6178;
  --line: #ece5f0;
  --bg: #fbf9fc;
  --surface: #ffffff;
  --brand: #b8628f;
  --brand-dark: #8a3f68;
  --brand-light: #f6e6ee;
  --accent: #7a5ea8;
  --success: #3f9d63;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(80, 40, 70, 0.06);
  --shadow-md: 0 8px 24px rgba(80, 40, 70, 0.10);
  --shadow-lg: 0 20px 48px rgba(60, 30, 60, 0.16);
  --font-ui: 'Poppins', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
select, input, textarea { font-family: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }

.view[hidden] { display: none !important; }

/* ---------------- Buttons & basic inputs ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px;
  padding: 11px 20px; font-size: 14px; font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--brand-light); color: var(--brand-dark); }
.btn-secondary:hover { background: #f0d3e2; }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { background: #f4f0f6; color: var(--ink); }
.btn-lg { padding: 15px 28px; font-size: 16px; border-radius: 999px; }
.btn-sm { padding: 8px 14px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.input {
  width: 100%; padding: 10px 13px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font-size: 13.5px; margin-bottom: 12px; transition: border-color .15s;
}
.input:focus { outline: none; border-color: var(--brand); }
textarea.input { resize: vertical; min-height: 54px; }
.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 4px 0 6px; }
.toggle-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); margin: 6px 0 14px; cursor: pointer; }
.toggle-row input { accent-color: var(--brand); width: 16px; height: 16px; }

/* ---------------- Topbar ---------------- */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 12px 24px; }
.brand { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; }
.brand-mark { font-size: 26px; }
.brand-text { font-size: 14.5px; color: var(--ink-soft); }
.brand-text strong { color: var(--ink); font-size: 15.5px; }
.main-nav { display: flex; gap: 4px; margin-left: 8px; }
.nav-link { background: none; border: none; padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--ink-soft); }
.nav-link:hover { background: #f4eff7; color: var(--ink); }
.nav-link.active { background: var(--brand-light); color: var(--brand-dark); }
.topbar-actions { margin-left: auto; display: flex; gap: 10px; }

/* ---------------- Layout helpers ---------------- */
#app { max-width: 1320px; margin: 0 auto; padding: 0 24px 80px; }
.section-head { margin-bottom: 18px; }
.section-head h2 { font-size: 21px; }
.section-head p { color: var(--ink-soft); font-size: 13.5px; margin-top: 4px; }
.section-head-inline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.section-head-inline h3 { font-size: 16px; }
.dash-section { margin-top: 52px; }

/* ---------------- Hero ---------------- */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; padding: 56px 0 20px; }
.eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--brand-dark); background: var(--brand-light); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.hero h1 { font-size: 40px; letter-spacing: -0.02em; margin-bottom: 16px; }
.hero-sub { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 520px; }
.hero-actions { display: flex; gap: 12px; margin: 26px 0 34px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 22px; color: var(--brand-dark); }
.hero-stats span { font-size: 12px; color: var(--ink-soft); }
.hero-visual {
  height: 380px; border-radius: 28px;
  background: linear-gradient(150deg, #f6e6ee, #ece0f6 45%, #fdf1e6);
  position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.hero-visual::before, .hero-visual::after {
  content: ''; position: absolute; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.hero-visual::before { width: 58%; height: 62%; background: #fff; top: 12%; left: 8%; transform: rotate(-6deg); }
.hero-visual::after { width: 46%; height: 50%; background: linear-gradient(160deg, var(--brand), var(--accent)); top: 34%; right: 8%; transform: rotate(7deg); }

/* ---------------- Quick blocks ---------------- */
.quick-blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.quick-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; text-align: left; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.quick-block:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.qb-icon { font-size: 24px; }
.qb-title { font-weight: 700; font-size: 14.5px; }
.qb-desc { font-size: 12px; color: var(--ink-soft); }

/* ---------------- Chips / grids ---------------- */
.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip.active { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }

.niche-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.niche-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 12px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.niche-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.niche-card .icon { font-size: 26px; display: block; margin-bottom: 8px; }
.niche-card .name { font-size: 12.5px; font-weight: 600; }

.saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.empty-hint { color: var(--ink-soft); font-size: 13.5px; padding: 24px; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius-md); text-align: center; }

.saved-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.saved-card .thumb-box { aspect-ratio: 1/1; overflow: hidden; position: relative; background: #f4f0f6; }
.saved-card .thumb-box .art-stage { position: absolute; top: 0; left: 0; transform-origin: top left; }
.saved-card .meta { padding: 10px 12px 12px; }
.saved-card .meta .title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.saved-card .meta .sub { font-size: 11px; color: var(--ink-soft); margin-bottom: 10px; }
.saved-card .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.saved-card .row-actions .btn { flex: 1; padding: 6px 8px; font-size: 11px; }

.tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tip-card { background: linear-gradient(160deg, #fff, #faf5f9); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; font-size: 12.5px; color: var(--ink-soft); }
.tip-card span { font-size: 20px; display: block; margin-bottom: 8px; }
.tip-card strong { color: var(--ink); }

/* ---------------- Catálogo ---------------- */
.catalog-head { padding: 40px 0 6px; }
.catalog-head h1 { font-size: 30px; margin-bottom: 6px; }
.catalog-head p { color: var(--ink-soft); font-size: 14px; }
.catalog-filters { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 22px 0 18px; flex-wrap: wrap; }
.search-box { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 18px; }
.search-box input { border: none; outline: none; flex: 1; font-size: 13.5px; background: transparent; }
.fav-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.fav-toggle input { accent-color: var(--brand); }
.filter-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.filter-label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); padding-top: 9px; white-space: nowrap; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 24px; }
.type-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; text-align: left; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 6px; }
.type-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.type-card.active { border-color: var(--brand); background: var(--brand-light); }
.type-card .tc-top { display: flex; align-items: center; justify-content: space-between; }
.type-card .icon { font-size: 22px; }
.type-card .fav-btn { background: none; border: none; font-size: 15px; opacity: .55; }
.type-card .fav-btn.is-fav { opacity: 1; }
.type-card .name { font-weight: 700; font-size: 13.5px; }
.type-card .cat-badge { font-size: 10.5px; color: var(--ink-soft); background: #f4eff7; display: inline-block; padding: 3px 9px; border-radius: 999px; width: fit-content; }

.style-gallery { margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--line); }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.template-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.template-card .thumb-box { aspect-ratio: 1/1; position: relative; overflow: hidden; background: #f4f0f6; }
.template-card .thumb-box .art-stage { position: absolute; top: 0; left: 0; transform-origin: top left; }
.template-card .thumb-fav { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.9); border: none; border-radius: 999px; width: 30px; height: 30px; font-size: 14px; z-index: 5; }
.template-card .tc-info { padding: 10px 12px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.template-card .tc-info .tags { font-size: 10.5px; color: var(--ink-soft); }
.template-card .tc-info .btn { flex-shrink: 0; }

/* ---------------- Editor ---------------- */
.editor-layout { display: grid; grid-template-columns: 340px 1fr; gap: 24px; margin-top: 30px; align-items: start; }
.editor-sidebar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); position: sticky; top: 78px; max-height: calc(100vh - 96px); overflow: hidden; }
.sidebar-scroll { max-height: calc(100vh - 96px); overflow-y: auto; padding: 6px 0; }
.acc { border-bottom: 1px solid var(--line); }
.acc:last-child { border-bottom: none; }
.acc summary { padding: 15px 18px; font-weight: 700; font-size: 13.5px; cursor: pointer; list-style: none; display: flex; align-items: center; user-select: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '⌄'; margin-left: auto; color: var(--ink-soft); transition: transform .15s; }
.acc[open] summary::after { transform: rotate(180deg); }
.acc-body { padding: 0 18px 18px; }
.actions-body { display: flex; flex-direction: column; gap: 8px; }
.actions-body .btn { width: 100%; justify-content: flex-start; }

.upload-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.chip-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.chip-suggestions .sugg { border: 1px dashed var(--line); background: #faf7fb; color: var(--ink-soft); border-radius: 999px; padding: 5px 11px; font-size: 11.5px; }
.chip-suggestions .sugg:hover { border-color: var(--brand); color: var(--brand-dark); }

.tag-input-row { display: flex; gap: 8px; }
.tag-input-row .input { margin-bottom: 8px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag-pill { background: var(--brand-light); color: var(--brand-dark); border-radius: 999px; padding: 5px 8px 5px 12px; font-size: 12px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.tag-pill button { background: none; border: none; color: var(--brand-dark); font-size: 13px; opacity: .7; }

.chip-toggle-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-toggle { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.pay-toggle.active { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }

.palette-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.swatch { width: 34px; height: 34px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); position: relative; }
.swatch.active { box-shadow: 0 0 0 2.5px var(--brand); }
.color-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.color-row label { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.color-row input[type=color] { width: 34px; height: 30px; border: none; border-radius: 6px; padding: 0; background: none; }

.segmented { display: flex; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 12px; width: fit-content; }
.segmented button { border: none; background: #fff; padding: 7px 16px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.segmented button.active { background: var(--brand); color: #fff; }

.editor-main { min-width: 0; }
.editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.format-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.format-tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.format-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.export-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.preview-wrap { display: flex; justify-content: center; background: linear-gradient(160deg, #f3edf5, #f8f3ee); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm) inset; }
.stage-viewport { position: relative; box-shadow: var(--shadow-lg); border-radius: 6px; overflow: hidden; background: #fff; }

.variations-block { margin-top: 28px; }
.variations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.variation-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.variation-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.variation-card .thumb-box { aspect-ratio: 1/1; position: relative; overflow: hidden; background: #f4f0f6; }
.variation-card .thumb-box .art-stage { position: absolute; top: 0; left: 0; transform-origin: top left; }
.variation-card .v-label { padding: 8px 10px; font-size: 11px; color: var(--ink-soft); text-align: center; font-weight: 600; }
.variations-empty { color: var(--ink-soft); font-size: 13px; padding: 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-md); grid-column: 1 / -1; }

/* ==========================================================================
   ART STAGE — motor visual dos templates
   ========================================================================== */
.art-stage {
  position: relative;
  display: grid;
  gap: 18px;
  overflow: hidden;
  background: var(--color-bg, #fff);
  color: var(--color-text, #222);
  font-family: var(--font-body, 'Poppins', sans-serif);
  padding: 70px;
  align-content: center;
}
/* A faixa superior precisa encostar na borda do canvas (sangria total) */
.layout-top-banner { align-content: start; }
.art-stage.format-banner { padding: 44px; gap: 12px; }
.art-stage * { box-sizing: border-box; }

.art-area { min-width: 0; }
.area-logo { grid-area: logo; }
.area-heading { grid-area: heading; }
.area-hero { grid-area: hero; }
.area-price { grid-area: price; }
.area-items { grid-area: items; }
.area-contact { grid-area: contact; }
.area-cta { grid-area: cta; }

.art-logo-img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.art-logo-fallback {
  width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff; font-size: 34px; font-weight: 800; font-family: var(--font-title);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.art-business { font-family: var(--font-title, 'Poppins', sans-serif); font-weight: 800; font-size: 2.6em; line-height: 1.1; color: var(--color-text); }
.art-slogan { font-size: 1.05em; color: var(--color-primary); font-weight: 600; margin-top: 6px; }
.art-image { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius, 14px); background-size: cover; background-position: center; margin-bottom: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.art-main-text { font-family: var(--font-title); font-weight: 700; font-size: 2.2em; line-height: 1.22; }
.art-secondary-text { font-size: 1.15em; color: var(--color-text); opacity: .78; margin-top: 10px; font-weight: 500; }

.art-price-block { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.price-old { text-decoration: line-through; opacity: .55; font-size: 1.1em; }
.price-new { font-family: var(--font-title); font-weight: 800; font-size: 2.6em; color: var(--color-primary); }

.art-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.art-list li { display: flex; align-items: center; gap: 10px; font-size: 1.12em; font-weight: 500; }
.art-list .dot { color: var(--color-primary); font-weight: 800; }

.art-payments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pay-chip { border: 1.5px solid var(--color-primary); color: var(--color-primary); border-radius: 999px; padding: 5px 13px; font-size: .85em; font-weight: 700; }

.art-contact { display: flex; flex-direction: column; gap: 6px; }
.contact-row { font-size: 1.02em; font-weight: 600; opacity: .92; }

.art-cta {
  font-family: var(--font-title); border: none; cursor: default;
  background: var(--color-primary); color: #fff; padding: 18px 30px; border-radius: var(--radius, 999px);
  font-weight: 800; font-size: 1.25em; box-shadow: 0 12px 26px rgba(0,0,0,.18); width: fit-content;
}

.art-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.art-area, .area-cta { position: relative; z-index: 1; }

/* ---- Formatos ---- */
.art-stage.format-square { }
.art-stage.format-portrait { }
.art-stage.format-story { }
.art-stage.format-banner { }

/* ---- Alinhamento & tamanho de texto ---- */
.art-stage.align-left { text-align: left; }
.art-stage.align-left .area-logo, .art-stage.align-left .area-price, .art-stage.align-left .area-cta { justify-self: start; }
.art-stage.align-center { text-align: center; }
.art-stage.align-center .art-area { justify-self: center; }
.art-stage.align-center .art-price-block, .art-stage.align-center .art-list, .art-stage.align-center .art-contact { align-items: center; }
.art-stage.align-right { text-align: right; }
.art-stage.align-right .art-area { justify-self: end; }
.art-stage.align-right .art-price-block, .art-stage.align-right .art-list, .art-stage.align-right .art-contact { align-items: flex-end; }
.art-stage.text-sm .art-main-text { font-size: 1.7em; } .art-stage.text-sm .art-business { font-size: 2.1em; }
.art-stage.text-lg .art-main-text { font-size: 2.7em; } .art-stage.text-lg .art-business { font-size: 3.1em; }

.art-stage.theme-dark { }

/* ==========================================================================
   ESTILOS VISUAIS (tipografia + decoração)
   ========================================================================== */
.style-minimalista { --font-title: 'Poppins', sans-serif; --font-body: 'Poppins', sans-serif; --radius: 6px; }
.style-minimalista .art-business { font-weight: 500; letter-spacing: .02em; }
.style-minimalista .art-main-text { font-weight: 500; }
.style-minimalista .art-cta { font-weight: 600; box-shadow: none; border: 1.5px solid var(--color-primary); background: transparent; color: var(--color-primary); }

.style-moderno { --font-title: 'Poppins', sans-serif; --font-body: 'Poppins', sans-serif; --radius: 18px; }
.style-moderno .art-business { text-transform: uppercase; letter-spacing: .01em; }
.style-moderno .art-deco::before { content: ''; position: absolute; width: 46%; height: 46%; background: var(--color-secondary); opacity: .5; border-radius: 40% 60% 55% 45%/50% 40% 60% 50%; top: -10%; right: -10%; }

.style-elegante { --font-title: 'Playfair Display', serif; --font-body: 'Lato', sans-serif; --radius: 4px; }
.style-elegante .art-business { font-weight: 700; }
.style-elegante .art-slogan { font-style: italic; font-weight: 400; }
.style-elegante .art-deco::after { content: ''; position: absolute; left: 70px; right: 70px; top: 64px; height: 1px; background: var(--color-primary); opacity: .5; }
.style-elegante .art-cta { border-radius: 2px; letter-spacing: .06em; text-transform: uppercase; font-size: 1em; }

.style-feminino-delicado { --font-title: 'Playfair Display', serif; --font-body: 'Quicksand', sans-serif; --radius: 30px; }
.style-feminino-delicado .art-business { font-weight: 600; }
.style-feminino-delicado .art-cta { border-radius: 999px; }
.style-feminino-delicado .art-deco::before { content: '✿'; position: absolute; font-size: 120px; color: var(--color-primary); opacity: .12; right: -10px; bottom: -30px; }
.style-feminino-delicado .art-logo-fallback, .style-feminino-delicado .art-logo-img { border-radius: 40% 60% 55% 45%/50% 40% 60% 50%; }

.style-comercial-chamativo { --font-title: 'Poppins', sans-serif; --font-body: 'Poppins', sans-serif; --radius: 12px; }
.style-comercial-chamativo .art-business { text-transform: uppercase; font-weight: 800; }
.style-comercial-chamativo .art-main-text { text-transform: uppercase; }
.style-comercial-chamativo .art-cta { font-size: 1.4em; padding: 20px 34px; }
.style-comercial-chamativo .art-deco::before { content: ''; position: absolute; inset: 0; border: 14px solid var(--color-primary); opacity: .9; }
.art-stage.style-comercial-chamativo { padding: 90px; }

/* ==========================================================================
   LAYOUTS (10 combinações de posicionamento)
   ========================================================================== */

/* 1. Hero centralizado */
.layout-centered-hero {
  grid-template-columns: 1fr;
  grid-template-areas: "logo" "heading" "hero" "price" "items" "contact" "cta";
  justify-items: center; text-align: center;
}
.layout-centered-hero .art-price-block, .layout-centered-hero .art-list, .layout-centered-hero .art-contact { align-items: center; }

/* 2. Dividido — logo/marca à esquerda */
.layout-split-left {
  grid-template-columns: .85fr 1.15fr;
  grid-template-areas: "logo heading" "logo hero" "logo price" "logo items" "logo contact" "logo cta";
  align-items: start;
}
.layout-split-left .area-logo, .layout-split-right .area-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--color-primary); border-radius: var(--radius, 14px); height: 100%; padding: 30px;
}
.layout-split-left .area-logo .art-logo-fallback, .layout-split-right .area-logo .art-logo-fallback { background: rgba(255,255,255,.25); }
.layout-split-left .area-logo .art-business, .layout-split-right .area-logo .art-business { color: #fff; font-size: 1.7em; text-align: center; }
.layout-split-left .area-logo .art-slogan, .layout-split-right .area-logo .art-slogan { color: rgba(255,255,255,.9); text-align: center; }
.layout-split-left .area-heading, .layout-split-right .area-heading { display: none; }

/* 3. Dividido — logo/marca à direita */
.layout-split-right {
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas: "heading logo" "hero logo" "price logo" "items logo" "contact logo" "cta logo";
}

/* 4. Faixa superior */
.layout-top-banner {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "logo logo" "heading heading" "hero hero" "price items" "cta contact";
  row-gap: 22px;
}
.layout-top-banner .area-logo { justify-self: start; }
.layout-top-banner .area-heading { background: var(--color-primary); margin: -70px -70px 0; padding: 26px 70px; }
.layout-top-banner.format-banner .area-heading { margin: -44px -44px 0; padding: 18px 44px; }
.layout-top-banner .area-heading .art-business, .layout-top-banner .area-heading .art-slogan { color: #fff; }

/* 5. Selo no canto (preço em destaque circular) */
.layout-badge-corner {
  grid-template-columns: 1fr;
  grid-template-areas: "logo" "heading" "hero" "items" "contact" "cta";
  justify-items: center; text-align: center;
}
.layout-badge-corner .area-price {
  position: absolute; top: 46px; right: 46px; z-index: 3;
  width: 170px; height: 170px; border-radius: 50%; background: var(--color-primary);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px rgba(0,0,0,.2);
}
.layout-badge-corner .area-price .art-price-block { flex-direction: column; align-items: center; gap: 0; }
.layout-badge-corner .area-price .price-new { color: #fff; font-size: 1.5em; }
.layout-badge-corner .area-price .price-old { color: rgba(255,255,255,.75); font-size: .8em; }
.layout-badge-corner.format-banner .area-price { width: 110px; height: 110px; top: 24px; right: 24px; }

/* 6. Foco em lista */
.layout-list-focus {
  grid-template-columns: 1fr;
  grid-template-areas: "logo" "heading" "items" "hero" "price" "contact" "cta";
}
.layout-list-focus .area-items {
  background: var(--color-secondary); border-radius: var(--radius, 14px); padding: 26px; opacity: .96;
}
.layout-list-focus .art-list li { font-size: 1.22em; }

/* 7. Preço em destaque */
.layout-price-tag-big {
  grid-template-columns: 1fr;
  grid-template-areas: "logo" "heading" "price" "hero" "items" "contact" "cta";
  justify-items: center; text-align: center;
}
.layout-price-tag-big .area-price { background: var(--color-primary); border-radius: var(--radius, 14px); padding: 22px 40px; }
.layout-price-tag-big .price-new { color: #fff; font-size: 3.6em; }
.layout-price-tag-big .price-old { color: rgba(255,255,255,.75); }

/* 8. Cartões empilhados */
.layout-card-stack {
  grid-template-columns: 1fr;
  grid-template-areas: "logo" "heading" "hero" "price" "items" "contact" "cta";
  gap: 14px;
}
.layout-card-stack .art-area:not(.area-logo):not(.area-cta) {
  background: #fff; border-radius: var(--radius, 14px); padding: 18px 22px; box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.layout-card-stack.theme-dark .art-area:not(.area-logo):not(.area-cta) { background: rgba(255,255,255,.06); }

/* 9. Minimalista central */
.layout-minimal-center {
  grid-template-columns: 1fr;
  grid-template-areas: "heading" "hero" "cta" "price" "items" "contact" "logo";
  justify-items: center; text-align: center; gap: 30px;
}
.layout-minimal-center .area-price, .layout-minimal-center .area-items, .layout-minimal-center .area-contact { opacity: .75; font-size: .9em; }
.layout-minimal-center .art-price-block, .layout-minimal-center .art-list, .layout-minimal-center .art-contact { align-items: center; justify-content: center; }
.layout-minimal-center .area-logo .art-logo-img, .layout-minimal-center .area-logo .art-logo-fallback { width: 54px; height: 54px; font-size: 22px; }

/* 10. Diagonal marcante */
.layout-bold-diagonal {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "logo heading" "hero heading" "price price" "items items" "contact contact" "cta cta";
}
.layout-bold-diagonal .area-heading { text-align: right; align-self: start; }
.layout-bold-diagonal .art-deco::before {
  content: ''; position: absolute; top: -10%; right: -20%; width: 85%; height: 60%;
  background: var(--color-primary); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); opacity: .93;
}
.layout-bold-diagonal .area-heading .art-business, .layout-bold-diagonal .area-heading .art-slogan { color: #fff; }
.layout-bold-diagonal .area-price { justify-self: start; }

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(30, 18, 30, .5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-overlay[hidden] { display: none; }
.modal { background: #fff; border-radius: var(--radius-lg); width: 460px; max-width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 18px; }
.modal-close { background: none; border: none; font-size: 16px; color: var(--ink-soft); }
.modal-body { padding: 20px 22px; }
.modal-hint { color: var(--ink-soft); font-size: 13px; margin-bottom: 16px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); }

/* ---------------- Toasts ---------------- */
#toastContainer { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; box-shadow: var(--shadow-md); }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { background: #a4324a; }
.toast-success { background: var(--success); }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1080px) {
  .editor-layout { grid-template-columns: 1fr; }
  .editor-sidebar { position: static; max-height: none; }
  .sidebar-scroll { max-height: none; overflow: visible; }
  .quick-blocks { grid-template-columns: repeat(2, 1fr); }
  .tips-grid { grid-template-columns: repeat(2, 1fr); }
  .variations-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { height: 220px; order: -1; }
  .hero h1 { font-size: 30px; }
}

@media (max-width: 640px) {
  .topbar-inner { flex-wrap: wrap; padding: 10px 16px; }
  .main-nav { order: 3; width: 100%; justify-content: space-between; }
  .topbar-actions { margin-left: auto; }
  #app { padding: 0 16px 60px; }
  .quick-blocks { grid-template-columns: 1fr 1fr; }
  .tips-grid { grid-template-columns: 1fr; }
  .type-grid, .template-grid, .saved-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .variations-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { gap: 20px; }
  .catalog-filters { flex-direction: column; align-items: stretch; }
  .editor-toolbar { flex-direction: column; align-items: stretch; }
  .preview-wrap { padding: 18px; }
}