/* ============================================================
   Motor de demos NND — chrome de edición en vivo
   Compartido por todas las demos. Estilos de contenido = inline por demo.
   ============================================================ */
:root {
  --nnd-ink: #08182B;
  --nnd-cyan: #07C4DA;
  --nnd-cyan-deep: #0E7E94;
  --nnd-line: #E2E8F0;
}
* { box-sizing: border-box; }
body { margin: 0; }

/* Bandera superior */
.demo-flag {
  background: var(--nnd-ink); color: #fff; text-align: center;
  font-size: .74rem; padding: .45rem 1rem; font-weight: 600;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.demo-flag a { color: var(--nnd-cyan); text-decoration: underline; font-weight: 700; }

/* Barra de edición (NND chrome) */
.edit-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem .9rem; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--nnd-line);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.edit-hint { font-size: .76rem; color: #51657a; font-weight: 600; margin-right: auto; display: flex; align-items: center; gap: .4rem; }
.edit-hint b { color: var(--nnd-ink); }
.edit-btn {
  display: inline-flex; align-items: center; gap: .4rem; border: 1.5px solid var(--nnd-line);
  background: #fff; color: var(--nnd-ink); font-weight: 700; font-size: .82rem;
  padding: .5rem .95rem; border-radius: 100px; cursor: pointer; transition: .2s; font-family: inherit;
}
.edit-btn:hover { border-color: var(--nnd-cyan); }
.edit-btn.primary { background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; border-color: transparent; }
.edit-btn.active { background: var(--nnd-ink); color: #fff; border-color: var(--nnd-ink); }
.edit-btn.ghost { background: transparent; }

/* Estado editable */
[data-demo-root].is-editing [data-edit] {
  outline: 1.5px dashed var(--nnd-cyan); outline-offset: 3px; border-radius: 4px;
  cursor: text; transition: background .15s;
}
[data-demo-root].is-editing [data-edit]:hover { background: rgba(7,196,218,.08); }
[data-demo-root].is-editing [data-edit]:focus { outline: 2px solid var(--nnd-cyan); background: rgba(7,196,218,.1); }
[data-edit] { outline: none; }

/* Auto-edición (data-edit-auto) */
[data-ek] { outline: none; }
[data-demo-root].is-editing [data-ek] { outline: 1.5px dashed var(--nnd-cyan); outline-offset: 3px; border-radius: 4px; cursor: text; transition: background .15s; }
[data-demo-root].is-editing [data-ek]:hover { background: rgba(7,196,218,.08); }
[data-demo-root].is-editing [data-ek]:focus { outline: 2px solid var(--nnd-cyan); background: rgba(7,196,218,.12); }

/* Imágenes editables (clic para subir foto) */
[data-demo-root].is-editing img[data-ik] { outline: 2px dashed var(--nnd-cyan); outline-offset: 2px; cursor: pointer; transition: outline-color .2s, filter .2s; }
[data-demo-root].is-editing img[data-ik]:hover { outline-color: var(--nnd-cyan-deep); filter: brightness(.9); }

/* ---- Editor avanzado (panel lateral) ---- */
.nnd-adv-btn {
  position: fixed; right: 14px; bottom: 64px; z-index: 2147483600;
  display: inline-flex; align-items: center; gap: .35rem;
  background: #fff; color: #08182B; border: 1.5px solid #d9e5ef;
  font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 700; font-size: .8rem;
  padding: .55rem .95rem; border-radius: 100px; cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.45);
}
.nnd-adv-btn:hover { border-color: var(--nnd-cyan); }
.nnd-adv {
  position: fixed; top: 50%; right: 80px; transform: translate(24px, -50%);
  width: min(92vw, 380px); max-height: 86vh;
  background: #fff; color: #08182B; z-index: 2147483601;
  border: 1px solid #e6eef5; border-radius: 22px;
  box-shadow: 0 40px 90px -28px rgba(8,24,43,.5), 0 6px 18px rgba(8,24,43,.1);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .32s cubic-bezier(.22,.61,.36,1);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.nnd-adv.open { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.nnd-adv__head { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1.3rem; background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; }
.nnd-adv__head b { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.nnd-adv__x { border: 0; background: rgba(255,255,255,.22); color: #fff; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: 1rem; transition: background .15s; }
.nnd-adv__x:hover { background: rgba(255,255,255,.38); }
.nnd-adv__body { padding: 1.1rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.nnd-adv__sec { background: #f7fafc; border: 1px solid #eef3f8; border-radius: 16px; padding: 1rem; margin: 0; }
.nnd-adv__sec h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--nnd-cyan-deep); margin: 0 0 .4rem; font-weight: 800; }
.nnd-adv__sec p { font-size: .75rem; color: #6e839a; margin: 0 0 .7rem; line-height: 1.45; }
.nnd-adv__color { width: 100%; height: 48px; border: 1px solid #dde7f0; border-radius: 12px; cursor: pointer; background: #fff; padding: 4px; }
.nnd-adv__fotohead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.nnd-adv__sectitle { font-size: .78rem; font-weight: 700; color: #08182B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nnd-adv__toggle { border: 1px solid #dbe6f0; background: #fff; color: var(--nnd-cyan-deep); font-weight: 700; font-size: .68rem; cursor: pointer; padding: .28rem .65rem; border-radius: 100px; flex: none; transition: .15s; }
.nnd-adv__toggle:hover { border-color: var(--nnd-cyan); background: #f4fbfc; }
.nnd-adv__seg { display: flex; gap: 3px; background: #eaf0f6; border-radius: 100px; padding: 3px; margin-bottom: .6rem; }
.nnd-adv__seg button { flex: 1; border: 0; background: transparent; font: inherit; font-size: .72rem; font-weight: 700; color: #6e839a; padding: .4rem; border-radius: 100px; cursor: pointer; transition: .15s; }
.nnd-adv__seg button.active { background: #fff; color: var(--nnd-cyan-deep); box-shadow: 0 1px 3px rgba(8,24,43,.14); }
.nnd-adv__search { width: 100%; border: 1px solid #dde7f0; border-radius: 10px; padding: .5rem .7rem; font: inherit; font-size: .78rem; margin-bottom: .6rem; background: #fff; box-sizing: border-box; }
.nnd-adv__search:focus { outline: none; border-color: var(--nnd-cyan); box-shadow: 0 0 0 3px rgba(7,196,218,.15); }
.nnd-adv__sectitle, .nnd-adv__sectitle2 { font-size: .66rem; font-weight: 800; color: #8499ac; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .06em; }
.nnd-adv__img-cta { transition: opacity .15s; }
.nnd-adv__empty { font-size: .78rem; color: #6e839a; padding: .6rem; text-align: center; }
.nnd-adv__imgs, .nnd-adv__txts { display: flex; flex-direction: column; gap: .45rem; }
.nnd-adv__img, .nnd-adv__txt { display: flex; align-items: center; gap: .7rem; padding: .5rem; border: 1px solid #e9f0f6; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, box-shadow .15s, transform .12s; }
.nnd-adv__img:hover, .nnd-adv__txt:hover { border-color: var(--nnd-cyan); box-shadow: 0 8px 18px -12px rgba(7,196,218,.7); transform: translateY(-1px); }
.nnd-adv__thumb { width: 48px; height: 48px; flex: none; border-radius: 10px; background-color: #16161c; background-position: center; background-size: cover; background-repeat: no-repeat; border: 1px solid #e9f0f6; }
.nnd-adv__img-label, .nnd-adv__txt-label { flex: 1; min-width: 0; font-size: .76rem; color: #41576c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nnd-adv__img-cta { font-size: .66rem; font-weight: 800; color: #fff; background: var(--nnd-cyan-deep); padding: .22rem .6rem; border-radius: 100px; flex: none; }
.nnd-adv__txt-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: rgba(7,196,218,.12); border-radius: 9px; font-size: .85rem; }
.nnd-edit-target { outline: 2px solid var(--nnd-cyan) !important; outline-offset: 3px; background: rgba(7,196,218,.1); border-radius: 4px; scroll-margin-top: 90px; }
.nnd-adv__reset { width: 100%; padding: .8rem; border: 1.5px solid #f0dada; background: #fff; border-radius: 12px; font-weight: 700; cursor: pointer; color: #b14444; transition: .15s; }
.nnd-adv__reset:hover { background: #fff5f5; border-color: #e0a8a8; }
@media (max-width: 560px) { .nnd-adv { right: 12px; transform: translate(24px, -50%); } .nnd-adv.open { transform: translate(0, -50%); } }
@media (prefers-reduced-motion: reduce) { .nnd-adv { transition: none; } }

/* ---- Mover elementos ---- */
.nnd-move-btn {
  position: fixed; right: 14px; bottom: 110px; z-index: 2147483600;
  display: inline-flex; align-items: center; gap: .35rem;
  background: #fff; color: #08182B; border: 1.5px solid #d9e5ef;
  font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 700; font-size: .8rem;
  padding: .55rem .95rem; border-radius: 100px; cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.45);
}
.nnd-move-btn.active { background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; border-color: transparent; }
.nnd-undo-btn {
  position: fixed; right: 14px; bottom: 156px; z-index: 2147483600;
  display: inline-flex; align-items: center; gap: .35rem;
  background: #fff; color: #08182B; border: 1.5px solid #d9e5ef;
  font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 700; font-size: .8rem;
  padding: .55rem .95rem; border-radius: 100px; cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.45);
}
.nnd-undo-btn:hover { border-color: var(--nnd-cyan); }
[data-demo-root].nnd-moving { user-select: none; -webkit-user-select: none; }
[data-demo-root].nnd-moving::before {
  content: ""; position: fixed; inset: 0; z-index: 2900; pointer-events: none;
  background-image:
    linear-gradient(rgba(7,196,218,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,196,218,.14) 1px, transparent 1px);
  background-size: 16px 16px;
  transform: translateZ(0); /* capa propia: no se repinta al mover */
}
/* En modo mover, sin transiciones ni animaciones -> el arrastre no rebota (causa principal del lag) */
[data-demo-root].nnd-moving [data-mk] { cursor: move; touch-action: none; transition: none !important; }
[data-mk].nnd-hover { outline: 1.5px dashed var(--nnd-cyan); outline-offset: 2px; background: rgba(7,196,218,.06); }
[data-mk].nnd-dragging { opacity: .9; outline: 2px solid var(--nnd-cyan) !important; position: relative; z-index: 5000; cursor: grabbing; }
.nnd-resize { position: fixed; width: 16px; height: 16px; background: var(--nnd-cyan); border: 2px solid #fff; border-radius: 4px; cursor: nwse-resize; z-index: 2147483602; display: none; box-shadow: 0 2px 6px rgba(0,0,0,.35); touch-action: none; }
.nnd-resize.show { display: block; }

/* ---- Dock de edición (centro, borde derecho) ---- */
.nnd-dock {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  z-index: 2147483600; display: flex; flex-direction: column; gap: .3rem; align-items: center;
  padding: .45rem; background: rgba(255,255,255,.96); backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid #dbe6f0; border-radius: 20px;
  box-shadow: 0 24px 60px -22px rgba(8,24,43,.5), 0 2px 8px rgba(8,24,43,.08);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.nnd-dock-btn {
  width: 46px; height: 46px; border: 0; border-radius: 14px; background: transparent;
  color: #08182B; cursor: pointer; display: grid; place-items: center; font-size: 1.2rem;
  transition: background .15s, transform .08s; line-height: 1;
}
.nnd-dock-btn:hover { background: #eef6f9; }
.nnd-dock-btn:active { transform: scale(.9); }
.nnd-dock-btn.active { background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; }
.nnd-dock-main { background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; box-shadow: 0 6px 16px -6px rgba(7,196,218,.65); }
.nnd-dock-main:hover { background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); filter: brightness(1.06); }
@media (max-width: 560px) { .nnd-dock-btn { width: 42px; height: 42px; } }

/* ---- Login del editor (modo real) ---- */
.nnd-login { position: fixed; inset: 0; z-index: 2147483640; display: none; align-items: center; justify-content: center; background: rgba(8,24,43,.55); backdrop-filter: blur(4px); font-family: "Hanken Grotesk", system-ui, sans-serif; }
.nnd-login.open { display: flex; }
.nnd-login__card { width: min(92vw, 360px); background: #fff; border-radius: 18px; padding: 1.6rem; box-shadow: 0 40px 90px -28px rgba(8,24,43,.6); }
.nnd-login__title { font-size: 1.15rem; font-weight: 800; color: #08182B; }
.nnd-login__sub { font-size: .82rem; color: #6e839a; margin: .3rem 0 1rem; }
.nnd-login input { width: 100%; box-sizing: border-box; border: 1px solid #dde7f0; border-radius: 10px; padding: .7rem .8rem; font: inherit; font-size: .9rem; margin-bottom: .6rem; }
.nnd-login input:focus { outline: none; border-color: var(--nnd-cyan); box-shadow: 0 0 0 3px rgba(7,196,218,.15); }
.nnd-login__err { color: #b14444; font-size: .78rem; min-height: 1.1em; margin-bottom: .4rem; }
.nnd-login__row { display: flex; gap: .6rem; }
.nnd-login__row button { flex: 1; border: 0; border-radius: 10px; padding: .7rem; font: inherit; font-weight: 700; cursor: pointer; }
.nnd-login__cancel { background: #eef3f8; color: #41576c; }
.nnd-login__go { background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; }
.nnd-login__go:disabled { opacity: .6; cursor: default; }

/* Controles que solo aparecen en modo edición */
[data-demo-root]:not(.is-editing) .edit-only { display: none !important; }

/* Toggle "agotado" / disponibilidad */
.sold-toggle, .img-swap {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem;
  border: 1.5px solid var(--nnd-line); background: #fff; color: #51657a;
  font-weight: 700; font-size: .68rem; padding: .3rem .65rem; border-radius: 100px; cursor: pointer;
  font-family: "Hanken Grotesk", system-ui, sans-serif; transition: .2s;
}
.sold-toggle:hover, .img-swap:hover { border-color: var(--nnd-cyan); color: var(--nnd-cyan-deep); }
.is-sold .sold-toggle { background: var(--nnd-cyan); color: #fff; border-color: var(--nnd-cyan); }

/* Insignia "Agotado" (oculta hasta marcar) */
.sold-badge { display: none; font-size: .62rem; background: #F0E6E6; color: #9B5151; padding: .12rem .5rem; border-radius: 100px; font-weight: 700; white-space: nowrap; }
.is-sold .sold-badge { display: inline-block; }

/* Toast al entrar en edición */
.edit-toast {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translate(-50%, 160%);
  background: var(--nnd-ink); color: #fff; padding: .8rem 1.2rem; border-radius: 14px;
  font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: .85rem; font-weight: 600;
  box-shadow: 0 20px 50px -20px rgba(8,24,43,.6); z-index: 2147483605; max-width: 90vw; text-align: center;
  transition: transform .5s cubic-bezier(.22,.61,.36,1); display: flex; align-items: center; gap: .5rem;
}
.edit-toast.show { transform: translate(-50%, 0); }
.edit-toast b { color: var(--nnd-cyan); }

@media (prefers-reduced-motion: reduce) { .edit-toast { transition: none; } }

/* ============================================================
   Editor por OBJETOS: selección, tiradores, barra contextual,
   objetos añadidos y menú Añadir.
   ============================================================ */
.nnd-objlayer { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.nnd-o { box-sizing: border-box; }
body.nnd-edit-on .nnd-o { cursor: move; }
.nnd-o-imgph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #8499ac; font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: .8rem; font-weight: 700; }
.nnd-editing-text { outline: 2px solid var(--nnd-cyan); outline-offset: 3px; border-radius: 4px; cursor: text; }

/* Cuadro de selección */
.nnd-sel {
  position: fixed; z-index: 2147483550; border: 1.5px solid var(--nnd-cyan);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 8px 24px -14px rgba(7,196,218,.8);
  pointer-events: auto; cursor: move; background: rgba(7,196,218,.05); touch-action: none;
}
.nnd-h {
  position: absolute; width: 13px; height: 13px; background: #fff; border: 1.5px solid var(--nnd-cyan);
  border-radius: 3px; pointer-events: auto; box-shadow: 0 2px 6px -1px rgba(8,24,43,.4); touch-action: none;
}
/* En móvil, tiradores más grandes (dedo) */
@media (max-width: 560px) { .nnd-h { width: 18px; height: 18px; } .nnd-h-nw,.nnd-h-ne { top: -9px; } .nnd-h-sw,.nnd-h-se { bottom: -9px; } .nnd-h-nw,.nnd-h-sw { left: -9px; } .nnd-h-ne,.nnd-h-se { right: -9px; } }
/* Objetos añadidos: en modo edición no deben hacer scroll al arrastrar */
body.nnd-edit-on .nnd-o { touch-action: none; }
.nnd-h-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.nnd-h-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.nnd-h-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.nnd-h-se { bottom: -7px; right: -7px; cursor: nwse-resize; }

/* Barra contextual flotante */
.nnd-bar {
  position: fixed; z-index: 2147483560; display: flex; align-items: center; gap: .2rem; flex-wrap: wrap;
  max-width: calc(100vw - 12px);
  background: var(--nnd-ink); color: #fff; padding: .3rem; border-radius: 12px;
  box-shadow: 0 14px 34px -16px rgba(8,24,43,.75); font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.nnd-bar__b {
  border: 0; background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: .82rem;
  padding: .4rem .6rem; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
}
.nnd-bar__b:hover { background: rgba(255,255,255,.16); }
.nnd-bar__del:hover { background: rgba(232,73,73,.85); }
.nnd-bar__color { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; cursor: pointer; display: inline-flex; border: 1.5px solid rgba(255,255,255,.3); }
.nnd-bar__color input { width: 150%; height: 150%; margin: -25%; border: 0; padding: 0; background: none; cursor: pointer; }

/* Menú Añadir */
.nnd-addmenu {
  position: fixed; z-index: 2147483570; background: #fff; border: 1px solid var(--nnd-line);
  border-radius: 14px; padding: .35rem; box-shadow: 0 22px 50px -22px rgba(8,24,43,.6);
  display: flex; flex-direction: column; gap: 2px; min-width: 180px;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.nnd-addmenu button {
  border: 0; background: transparent; text-align: left; font: inherit; font-weight: 700; font-size: .85rem;
  color: var(--nnd-ink); padding: .55rem .7rem; border-radius: 9px; cursor: pointer;
}
.nnd-addmenu button:hover { background: #eef7fb; color: var(--nnd-cyan-deep); }

/* Barra de formato de texto */
.nnd-fmt {
  position: fixed; z-index: 2147483565; display: flex; align-items: center; gap: .15rem; flex-wrap: wrap;
  max-width: calc(100vw - 12px);
  background: #fff; color: var(--nnd-ink); padding: .25rem; border-radius: 11px; border: 1px solid var(--nnd-line);
  box-shadow: 0 14px 34px -16px rgba(8,24,43,.6); font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.nnd-fmt__b {
  border: 0; background: transparent; color: var(--nnd-ink); font: inherit; font-size: .9rem;
  min-width: 30px; height: 30px; padding: 0 .35rem; border-radius: 7px; cursor: pointer; line-height: 1;
}
.nnd-fmt__b:hover { background: #eef7fb; color: var(--nnd-cyan-deep); }
.nnd-bar__sel, .nnd-fmt__sel {
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; font: inherit;
  font-size: .76rem; font-weight: 700; border-radius: 8px; padding: .3rem .35rem; cursor: pointer;
}
.nnd-fmt__sel { background: #fff; color: var(--nnd-ink); border-color: var(--nnd-line); }
.nnd-bar__sel option { color: #08182B; }

/* Mango de rotar */
.nnd-roth {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1.5px solid var(--nnd-cyan);
  color: var(--nnd-cyan-deep); display: flex; align-items: center; justify-content: center; font-size: .85rem;
  cursor: grab; pointer-events: auto; box-shadow: 0 2px 6px -1px rgba(8,24,43,.4);
}
.nnd-roth:active { cursor: grabbing; }
.nnd-roth::before { content: ""; position: absolute; top: 22px; left: 50%; width: 1px; height: 8px; background: var(--nnd-cyan); }

/* Botón de fondo de sección en la barra */
.nnd-bar__bg { position: relative; display: inline-flex; align-items: center; gap: .25rem; font: inherit; font-size: .78rem; font-weight: 700; color: #fff; padding: .4rem .55rem; border-radius: 8px; cursor: pointer; }
.nnd-bar__bg:hover { background: rgba(255,255,255,.16); }
.nnd-bar__bg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Separador del menú Añadir */
.nnd-addmenu__div { height: 1px; background: var(--nnd-line); margin: .3rem .25rem; }

/* Modo colocación de bloques: barras "Insertar aquí" */
.nnd-place { position: fixed; inset: 0; z-index: 2147483540; pointer-events: none; background: rgba(8,24,43,.08); }
.nnd-place__bar {
  position: fixed; left: 50%; transform: translate(-50%, -50%); pointer-events: auto;
  background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; border: 0;
  font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 800; font-size: .8rem;
  padding: .5rem 1.1rem; border-radius: 100px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(7,196,218,.8); transition: transform .1s;
}
.nnd-place__bar:hover { transform: translate(-50%, -50%) scale(1.06); }

/* Al mover: ocultar el marco de edición para ver el resultado limpio */
[data-demo-root].nnd-moving.is-editing [data-ek],
[data-demo-root].nnd-moving.is-editing [data-edit],
[data-demo-root].nnd-moving.is-editing img[data-ik] { outline: none !important; background: transparent !important; }
.nnd-moving .nnd-bar { display: none !important; }
.nnd-moving .nnd-sel { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
.nnd-moving .nnd-h { display: none !important; }

/* Guías de alineación */
.nnd-guide { position: fixed; z-index: 2147483545; pointer-events: none; background: var(--nnd-cyan); }
.nnd-guide-v { top: 0; width: 1px; height: 100vh; box-shadow: 0 0 0 .5px rgba(7,196,218,.4); }
.nnd-guide-h { left: 0; height: 1px; width: 100vw; box-shadow: 0 0 0 .5px rgba(7,196,218,.4); }