/* Editor PowerClip do hero (arraste + zoom). Compartilhável entre páginas. */
.hero-editor { display: none; margin-top: 6px; }
.hero-editor.is-open { display: block; }

.hero-editor__frame {
    position: relative; width: 100%; max-width: 520px; aspect-ratio: 1920 / 640;
    border-radius: 12px; overflow: hidden; background: #0f172a;
    border: 1px solid var(--color-border); touch-action: none; cursor: grab;
}
.hero-editor__frame:active { cursor: grabbing; }
.hero-editor__frame canvas { display: block; width: 100%; height: 100%; }

.hero-editor__hint {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 600;
    padding: 5px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap;
}

.hero-editor__controls {
    display: flex; align-items: center; gap: 12px; margin: 12px 0 4px;
    flex-wrap: wrap; max-width: 520px;
}
.hero-editor__zoom { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.hero-editor__zoom input[type=range] { flex: 1; accent-color: var(--sanpil-primary); }
.hero-editor__zoom i { color: var(--color-text-muted); }

.hero-btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }