/* ============================================================
   EDITOR VISUAL (solo local, no va en produccion) — cualquier sitio estatico
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
#cv-ed,#cv-ed *{box-sizing:border-box}
/* ventana flotante: se puede arrastrar y encoger, para no tapar la pagina */
#cv-ed{position:fixed;top:14px;left:auto;right:14px;width:378px;height:min(88vh,880px);
  z-index:100000;
  background:#141414;color:#f1efe8;font:13px/1.45 "Manrope",sans-serif;
  border:1px solid #2c2c2c;border-radius:12px;display:none;flex-direction:column;
  overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.6)}
#cv-ed.on{display:flex}
#cv-ed.cv-min{height:auto !important}
#cv-ed.cv-min .cv-tabs,#cv-ed.cv-min .cv-body,#cv-ed.cv-min .cv-ft{display:none}
#cv-fab{position:fixed;right:18px;bottom:18px;z-index:100001;width:52px;height:52px;
  border-radius:50%;border:0;cursor:pointer;background:#bcd824;color:#141414;
  font:700 20px/1 system-ui;box-shadow:0 8px 30px rgba(0,0,0,.4)}
#cv-fab:hover{transform:scale(1.06)}

/* barra de agarre: de aqui se arrastra la ventana */
.cv-bar{display:flex;align-items:center;gap:6px;padding:7px 8px 7px 10px;
  background:#101010;border-bottom:1px solid #2c2c2c;cursor:grab;flex:0 0 auto;
  user-select:none}
.cv-bar.drag{cursor:grabbing}
.cv-bar__t{flex:1 1 auto;font-size:10.5px;letter-spacing:.12em;color:#7d7d7d;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-bar button{background:#1e1e1e;border:1px solid #333;color:#cfcfcf;border-radius:5px;
  cursor:pointer;font:inherit;font-size:11px;line-height:1;padding:5px 7px;flex:0 0 auto}
.cv-bar button:hover{background:#2b2b2b;color:#f1efe8}
.cv-bar button.on{background:#bcd824;border-color:#bcd824;color:#141414}

/* esquina para cambiar el tamano */
.cv-rs{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;
  z-index:3;background:linear-gradient(135deg,transparent 48%,#3a3a3a 48%,#3a3a3a 62%,
    transparent 62%,transparent 72%,#3a3a3a 72%,#3a3a3a 86%,transparent 86%)}

.cv-hd{padding:12px 14px;border-bottom:1px solid #2c2c2c;display:grid;gap:9px;flex:0 0 auto}
.cv-crumb{display:flex;align-items:center;gap:6px;min-height:26px}
.cv-crumb b{background:#bcd824;color:#141414;padding:3px 7px;border-radius:4px;
  font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.cv-crumb button{background:#232323;border:1px solid #333;color:#f1efe8;border-radius:4px;
  cursor:pointer;padding:3px 8px;font:inherit}
.cv-crumb button:hover{background:#2f2f2f}
.cv-row{display:flex;gap:6px;flex-wrap:wrap}
.cv-seg{display:flex;border:1px solid #333;border-radius:5px;overflow:hidden}
.cv-seg button{position:relative;flex:1;background:#1c1c1c;border:0;color:#9a9a9a;padding:6px 8px;
  cursor:pointer;font:inherit;font-size:11px;white-space:nowrap}
.cv-seg button.on{background:#bcd824;color:#141414;font-weight:700}
/* punto verde: este breakpoint ya tiene cambios guardados en el elemento actual */
.cv-seg button.cv-has-edit::after{content:'';position:absolute;top:3px;right:4px;
  width:6px;height:6px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 1px #141414}
.cv-tabs{display:flex;border-bottom:1px solid #2c2c2c;flex:0 0 auto}
.cv-tabs button{flex:1;background:transparent;border:0;border-bottom:2px solid transparent;
  color:#8f8f8f;padding:10px 4px;cursor:pointer;font:inherit;font-size:11.5px;letter-spacing:.06em}
.cv-tabs button.on{color:#f1efe8;border-bottom-color:#bcd824}

.cv-body{flex:1 1 auto;overflow:auto;padding:6px 0 28px;min-height:0}
.cv-body::-webkit-scrollbar{width:8px}
.cv-body::-webkit-scrollbar-thumb{background:#333;border-radius:8px}

.cv-grp{border-bottom:1px solid #232323}
.cv-grp>summary{cursor:pointer;padding:10px 14px;font-weight:700;font-size:11.5px;
  letter-spacing:.1em;color:#cfcfcf;list-style:none;user-select:none}
.cv-grp>summary::-webkit-details-marker{display:none}
.cv-grp>summary::before{content:"+ ";color:#bcd824}
.cv-grp[open]>summary::before{content:"– "}
.cv-grp>div{padding:2px 14px 14px}

.cv-f{margin:9px 0}
.cv-f>label{display:block;font-size:10.5px;letter-spacing:.09em;color:#8f8f8f;margin-bottom:4px;
  text-transform:uppercase}
.cv-f input[type=text],.cv-f input[type=number],.cv-f select,.cv-f textarea{
  width:100%;background:#1c1c1c;border:1px solid #333;border-radius:5px;color:#f1efe8;
  padding:6px 8px;font:inherit;font-size:12px}
/* dropdowns planos: fuera el estilo del sistema, flecha propia */
.cv-f select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-color:#1c1c1c;
  background-image:linear-gradient(45deg,transparent 50%,#8f8f8f 50%),
                   linear-gradient(135deg,#8f8f8f 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding:7px 30px 7px 10px;border-radius:6px;line-height:1.3;
  text-overflow:ellipsis;cursor:pointer}
.cv-f select:hover{border-color:#4a4a4a;background-color:#212121}
.cv-f select::-ms-expand{display:none}
/* el menu que se abre tambien oscuro */
.cv-f select option{background:#1c1c1c;color:#f1efe8}
.cv-f input:focus,.cv-f select:focus,.cv-f textarea:focus{outline:1px solid #bcd824;border-color:#bcd824}
.cv-f select:focus{background-image:linear-gradient(45deg,transparent 50%,#bcd824 50%),
                   linear-gradient(135deg,#bcd824 50%,transparent 50%)}
.cv-f textarea{min-height:78px;resize:vertical}
.cv-f input::placeholder{color:#5c5c5c}
.cv-4{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.cv-4 input{text-align:center}

/* ---------- campo de numero con flechitas (estilo Divi) ----------
   sube y baja con las teclas arriba/abajo o con los dos botones */
.cv-num{position:relative;display:block;width:100%}
.cv-num>input[type=text]{width:100%;padding-right:24px}
.cv-num--unit>input[type=text]{padding-right:58px}
.cv-num__ar{position:absolute;right:1px;top:1px;bottom:1px;width:20px;
  display:flex;flex-direction:column;border-left:1px solid #2c2c2c;
  border-radius:0 4px 4px 0;overflow:hidden;background:#212121}
/* boton "unidad" (dice px/%/rem/vw/clamp... — nunca un simbolo) pegado a la
   izquierda de las flechas. solo aparece en campos de medida de verdad. */
.cv-unit{position:absolute;right:22px;top:1px;bottom:1px;width:34px;padding:0;
  border:0;border-left:1px solid #2c2c2c;background:transparent;color:#8f8f8f;
  font-size:9.5px;font-weight:600;cursor:pointer;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cv-unit:hover{color:#bcd824;background:rgba(188,216,36,.08)}
/* dropdown de unidades, y de estructuras de grid — pegados al boton que abrio */
#cv-un{position:fixed;z-index:100003;background:#181818;border:1px solid #333;
  border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5);display:none;padding:4px;
  max-height:280px;overflow:auto}
#cv-un.on{display:block}
#cv-un .g{display:flex;flex-direction:column;gap:2px;min-width:100px}
.cv-un-opt{background:transparent;border:0;color:#f1efe8;text-align:left;
  padding:6px 8px;border-radius:5px;cursor:pointer;font:inherit;font-size:11.5px}
.cv-un-opt:hover{background:#2a2a2a;color:#bcd824}
.cv-un-basic{background:rgba(61,220,132,.14);color:#3ddc84;font-weight:700}
.cv-un-basic:hover{background:rgba(61,220,132,.26);color:#3ddc84}
.cv-un-sep{height:1px;background:#2c2c2c;margin:4px 2px}

/* picker visual de "grid-template-columns" (Equal / Offset / Multi-Row) */
#cv-gr{position:fixed;width:250px;z-index:100003;background:#181818;
  border:1px solid #333;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  display:none;padding:10px;overflow:auto}
#cv-gr.on{display:block}
#cv-gr .x{display:none}
.cv-gr-h{font-size:11px;font-weight:700;letter-spacing:.05em;color:#cfcfcf;
  margin:10px 0 6px;display:flex;align-items:center;gap:6px}
.cv-gr-h:first-child{margin-top:0}
.cv-gr-tag{font-size:9px;font-weight:700;color:#8fd6ff;border:1px solid #3a5a6e;
  border-radius:4px;padding:1px 5px;background:rgba(143,214,255,.08)}
.cv-gr-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cv-gridbtn{border:1px solid #333;border-radius:6px;background:#1c1c1c;color:#8f8f8f;
  padding:6px;display:flex;align-items:center;justify-content:center}
.cv-gridbtn:hover{border-color:#bcd824;color:#bcd824;background:#212121}
.cv-num__b{flex:1 1 50%;border:0;background:transparent;color:#8f8f8f;
  font:7px/1 system-ui;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;user-select:none}
.cv-num__b+.cv-num__b{border-top:1px solid #2c2c2c}
.cv-num__b:hover{background:rgba(188,216,36,.14);color:#bcd824}
.cv-num__b:active{background:#bcd824;color:#141414}
.cv-num>input:focus+.cv-num__ar{border-left-color:#bcd824}
/* dentro de las rejillas de 2/3/4 los campos son mas estrechos */
.cv-4 .cv-num>input[type=text]{text-align:left;padding-left:6px}
/* el campo numerico del slider siempre muestra sus flechas */
.cv-sl input[type=number]::-webkit-inner-spin-button{opacity:1}
.cv-2{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.cv-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.cv-col{display:flex;gap:5px;align-items:center}
.cv-col input[type=color]{width:34px;height:30px;padding:0;border:1px solid #333;border-radius:5px;
  background:#1c1c1c;cursor:pointer;flex:0 0 auto}
.cv-col input[type=text]{flex:1;min-width:0}
/* cuentagotas */
.cv-eye{flex:0 0 auto;width:30px;height:30px;padding:0;border:1px solid #333;border-radius:5px;
  background:#232323;color:#bcd824;font-size:13px;line-height:1;cursor:pointer}
.cv-eye:hover{background:#2f2f2f;border-color:#bcd824}
.cv-eye.off{color:#5c5c5c;border-color:#2a2a2a}
.cv-sl{display:flex;gap:7px;align-items:center}
.cv-sl input[type=range]{flex:1;accent-color:#bcd824}
.cv-sl input[type=number]{width:66px}
.cv-mini{background:#232323;border:1px solid #333;color:#f1efe8;border-radius:5px;
  cursor:pointer;padding:5px 9px;font:inherit;font-size:11px}
.cv-mini:hover{background:#2f2f2f}
.cv-mini.on{background:#2a3106;border-color:#bcd824;color:#bcd824}
.cv-note{color:#7a7a7a;font-size:10.5px;padding:0 14px 10px;line-height:1.5}

.cv-ft{flex:0 0 auto;background:#101010;border-top:1px solid #2c2c2c;
  padding:10px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.cv-ft button{border:1px solid #333;background:#232323;color:#f1efe8;border-radius:6px;
  padding:9px 4px;cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.06em}
.cv-ft button:hover{background:#2f2f2f}
.cv-ft .cv-save{grid-column:1/-1;background:#bcd824;color:#141414;border-color:#bcd824}
.cv-ft .cv-save:hover{filter:brightness(1.08)}
.cv-msg{grid-column:1/-1;text-align:center;font-size:11px;color:#bcd824;min-height:14px}

/* resaltado al escoger. "html body" adelante (no solo "body") para ganarle
   en especificidad a la regla del propio sitio que esconde el cursor real
   (html[data-fcur="true"] body *{cursor:none}) — si no, esta regla perdia */
html body .cv-hi{outline:2px dashed #bcd824 !important;outline-offset:2px !important}
.cv-sel{outline:2px solid #bcd824 !important;outline-offset:2px !important}
/* mientras el editor esta abierto, cursor normal en toda la pagina —
   Klark lo pidio asi porque el cursor a la medida del sitio (mas abajo,
   .fcur) confunde mientras se edita */
html body.cv-pick,html body.cv-pick *{cursor:auto !important}
html body.cv-editing,html body.cv-editing *{cursor:auto !important}
/* ...y por eso mismo hay que APAGAR el punto del sitio mientras se edita.
   Si no, se ven los dos a la vez: la flecha del sistema y el punto. */
html body.cv-pick .fcur,html body.cv-editing .fcur{display:none !important}

/* selector de imagenes */
#cv-pk{position:fixed;inset:0;z-index:100002;background:rgba(10,10,10,.9);display:none;
  padding:40px;overflow:auto}
#cv-pk.on{display:block}
#cv-pk .g{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;
  max-width:1100px;margin:0 auto}
#cv-pk figure{margin:0;cursor:pointer;background:#1c1c1c;border:1px solid #333;border-radius:8px;
  overflow:hidden}
#cv-pk figure:hover{border-color:#bcd824}
#cv-pk img{width:100%;height:110px;object-fit:cover;background:#222}
#cv-pk figcaption{font:10px/1.3 "Manrope",sans-serif;color:#9a9a9a;padding:6px;
  word-break:break-all}
#cv-pk .x{position:fixed;top:16px;right:20px;background:#bcd824;color:#141414;border:0;
  border-radius:6px;padding:9px 14px;cursor:pointer;font:700 13px "Manrope",sans-serif}

/* selector de la escala del sistema de diseno (text-01..14 / space-01..10):
   dropdown chiquito pegado al boton "Aa"/"↕" que lo abre, no pantalla completa */
#cv-sc{position:fixed;width:230px;z-index:100002;background:#181818;
  border:1px solid #333;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  display:none;padding:8px;overflow:auto}
#cv-sc.on{display:block}
#cv-sc .g{display:flex;flex-direction:column;gap:6px}
#cv-sc .x{display:none}
.cv-esc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#1c1c1c;border:1px solid #333;border-radius:7px;padding:10px 13px;
  cursor:pointer;text-align:left;color:#f1efe8;font:inherit}
.cv-esc-row:hover{border-color:#bcd824;background:#212121}
.cv-esc-row b{font-size:12.5px;font-weight:700;white-space:nowrap}
.cv-esc-row small{color:#8f8f8f;font-size:10.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;margin-left:14px}
/* boton chiquito que abre el selector, al lado del campo o del grupo de 4 */
.cv-esc{flex:0 0 auto;width:30px;height:30px;padding:0;border:1px solid #333;border-radius:5px;
  background:#232323;color:#bcd824;font:700 11px "Manrope",sans-serif;line-height:1;cursor:pointer}
.cv-esc:hover{background:#2f2f2f;border-color:#bcd824}
.cv-escwrap{display:flex;gap:6px;align-items:stretch}
.cv-escwrap>.cv-num,.cv-escwrap>input{flex:1;min-width:0}

/* ---------- margin / padding estilo Divi: top-bottom en una fila,
   left-right en otra, cada pareja con su propio candado ---------- */
.cv-sp4{display:grid;grid-template-columns:1fr 26px 1fr;column-gap:8px;row-gap:12px;
  align-items:end;margin-bottom:8px}
.cv-sp-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.cv-sp-lbl{text-align:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7d7d7d}
.cv-linkpair{width:26px;height:26px;align-self:center;margin-bottom:19px;border:1px solid #333;
  border-radius:5px;background:#1c1c1c;color:#8f8f8f;cursor:pointer;font-size:12px;line-height:1;
  flex:0 0 auto}
.cv-linkpair:hover{border-color:#4a4a4a;color:#cfcfcf}
.cv-linkpair.on{background:#bcd824;border-color:#bcd824;color:#141414}
.cv-link4{margin-top:2px}

/* ---------- pastillas de color de marca (BRAND & SCALES) en cada campo de color ---------- */
.cv-swrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cv-sw{width:20px;height:20px;padding:0;border-radius:50%;border:1px solid #444;
  box-shadow:0 0 0 1px #000 inset}
.cv-sw:hover{border-color:#bcd824}

/* ---------- interruptor on/off (Repeat Gradient, Place Above...) ---------- */
.cv-switch{width:40px;height:22px;border-radius:11px;border:1px solid #333;
  background:#232323;position:relative;padding:0;cursor:pointer;flex:0 0 auto}
.cv-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#8f8f8f;transition:left .15s}
.cv-switch.on{background:rgba(188,216,36,.22);border-color:#bcd824}
.cv-switch.on::after{left:20px;background:#bcd824}

/* ---------- Gradient Stops: vista previa + riel con puntos que se arrastran
   (como Divi), en vez de filas de campos ---------- */
.cv-grad-preview{height:70px;border-radius:8px;border:1px solid #333;margin-bottom:14px}
.cv-grad-track{position:relative;height:4px;background:#333;border-radius:2px;
  margin:14px 8px 22px;cursor:copy}
.cv-grad-handle{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;
  transform:translate(-50%,-50%);border:2px solid #f1efe8;box-shadow:0 1px 4px rgba(0,0,0,.5);
  cursor:grab}
.cv-grad-handle.on{border-color:#bcd824;box-shadow:0 0 0 3px rgba(188,216,36,.25)}
.cv-grad-handle:active{cursor:grabbing}
.cv-grad-info{display:flex;align-items:center;gap:8px}
.cv-grad-pct-txt{flex:1 1 auto;color:#9a9a9a;font-size:11.5px}
/* pastilla de color redonda, igual que las de BRAND & SCALES */
.cv-grad-sw{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  border-radius:50%;border:1px solid #444;padding:0;cursor:pointer;background:none;flex:0 0 auto}
.cv-grad-sw::-webkit-color-swatch-wrapper{padding:0;border-radius:50%}
.cv-grad-sw::-webkit-color-swatch{border:0;border-radius:50%}
.cv-grad-del{flex:0 0 auto;width:24px;height:24px;padding:0;border:1px solid #333;
  border-radius:5px;background:#1c1c1c;color:#8f8f8f}
.cv-grad-del:hover{border-color:#e0645a;color:#e0645a}
.cv-sw-add{background:#1c1c1c;border:1px dashed #555;box-shadow:none;color:#8f8f8f;
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.cv-sw-add:hover{border-color:#bcd824;color:#bcd824}

/* ---------- slider de transparencia (Opacity) en los campos de color ---------- */
.cv-alpha-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.cv-alpha-lbl{flex:0 0 auto;color:#8f8f8f;font-size:11.5px}
.cv-alpha-row input[type=range]{flex:1 1 auto;-webkit-appearance:none;appearance:none;
  height:4px;background:#333;border-radius:2px;outline:none}
.cv-alpha-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:14px;height:14px;border-radius:50%;background:#bcd824;cursor:pointer;
  border:2px solid #141414}
.cv-alpha-row input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:#bcd824;cursor:pointer;border:2px solid #141414}
.cv-alpha-val{flex:0 0 34px;text-align:right;color:#c9c9c9;font-size:11.5px}

/* ---------- iconos del panel LAYOUT (direccion, justify, align) ---------- */
.cv-icorow{display:flex;flex-wrap:wrap;gap:6px}
.cv-ico{flex:0 0 auto;width:34px;height:26px;padding:0;display:flex;align-items:center;
  justify-content:center;border:1px solid #333;border-radius:5px;background:#1c1c1c;color:#8f8f8f}
.cv-ico:hover{border-color:#4a4a4a;color:#cfcfcf}
.cv-ico.on{background:#bcd824;border-color:#bcd824;color:#141414}

/* ---------- Divider (Torn Edge): fila Top/Bottom con su flip propio ---------- */
.cv-tear-side{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:6px 0}
.cv-tear-flip{display:flex;gap:6px}

/* ---------- area de BORDE: radio en cuadricula + boton de unir ---------- */
.cv-rad4{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;
  border:1px solid #2c2c2c;border-radius:8px;padding:12px}
.cv-radius-link{grid-column:1/-1;justify-self:center;width:64px;height:52px;
  border:1px dashed #3a3a3a;border-radius:8px;background:#1c1c1c;color:#8f8f8f;
  display:flex;align-items:center;justify-content:center}
.cv-radius-link:hover{border-color:#4a4a4a;color:#cfcfcf}
.cv-radius-link.on{border-style:solid;border-color:#bcd824;color:#bcd824;background:rgba(188,216,36,.08)}

/* vista previa chiquita del borde, debajo de las pestañas de lado */
.cv-bpv-wrap{display:flex;justify-content:center;padding:10px 0}
.cv-bpv{width:110px;height:70px;background:#1c1c1c;border-style:solid;border-color:#141414}

/* ---------- boton "assign presets" (los 6 puntitos) en la cabecera del grupo ---------- */
.cv-grp>summary{display:flex;align-items:center;gap:8px}
.cv-grp>summary>span{flex:1 1 auto}
.cv-preset-btn{flex:0 0 auto;width:24px;height:24px;padding:0;display:flex;align-items:center;
  justify-content:center;border:1px solid #333;border-radius:5px;background:#1c1c1c;
  color:#8f8f8f;cursor:pointer}
.cv-preset-btn:hover{border-color:#bcd824;color:#bcd824}

/* selector de presets guardados por seccion */
#cv-ps{position:fixed;inset:0;z-index:100002;background:rgba(10,10,10,.9);display:none;
  padding:40px;overflow:auto}
#cv-ps.on{display:block}
#cv-ps .g{display:flex;flex-direction:column;gap:6px;max-width:420px;margin:0 auto}
#cv-ps .x{position:fixed;top:16px;right:20px;background:#bcd824;color:#141414;border:0;
  border-radius:6px;padding:9px 14px;cursor:pointer;font:700 13px "Manrope",sans-serif}
.cv-preset-apply{flex:1;background:none;border:0;color:inherit;text-align:left;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700}
.cv-preset-del{flex:0 0 auto;background:none;border:0;color:#8f8f8f;cursor:pointer;
  font-size:13px;padding:0 4px}
.cv-preset-del:hover{color:#e66}
.cv-preset-save{display:flex;gap:6px;margin-top:6px}
.cv-preset-save input{flex:1;background:#1c1c1c;border:1px solid #333;border-radius:5px;
  color:#f1efe8;padding:8px 10px;font:inherit;font-size:12.5px;min-width:0}

/* animaciones de entrada del editor */
[data-cv-anim]{transition:opacity var(--cv-dur,900ms) cubic-bezier(.22,1,.36,1) var(--cv-delay,0ms),
  transform var(--cv-dur,900ms) cubic-bezier(.22,1,.36,1) var(--cv-delay,0ms)}
[data-cv-anim="up"]{opacity:0;transform:translateY(38px)}
[data-cv-anim="down"]{opacity:0;transform:translateY(-38px)}
[data-cv-anim="left"]{opacity:0;transform:translateX(-46px)}
[data-cv-anim="right"]{opacity:0;transform:translateX(46px)}
[data-cv-anim="fade"]{opacity:0}
[data-cv-anim="scale"]{opacity:0;transform:scale(.9)}
[data-cv-anim="blur"]{opacity:0;filter:blur(14px)}
[data-cv-anim].cv-in{opacity:1;transform:none;filter:none}

/* ---- el site esconde el cursor real (.fcur). Dentro del editor lo devolvemos ---- */
html body.cv-open #cv-ed,html body.cv-open #cv-ed *,
html body.cv-open #cv-fab,html body.cv-open #cv-pk,html body.cv-open #cv-pk *,
html body.cv-open #cv-sc,html body.cv-open #cv-sc *,
html body.cv-open #cv-ps,html body.cv-open #cv-ps *{
  cursor:auto !important}
html body.cv-open #cv-ed button,html body.cv-open #cv-ed summary,
html body.cv-open #cv-ed select,html body.cv-open #cv-ed input[type=color],
html body.cv-open #cv-ed input[type=range],
html body.cv-open #cv-fab,html body.cv-open #cv-pk figure,
html body.cv-open #cv-pk .x,html body.cv-open #cv-sc .x,
html body.cv-open #cv-sc .cv-esc-row,html body.cv-open #cv-ps .x,
html body.cv-open #cv-ps button{cursor:pointer !important}
html body.cv-open #cv-ed input[type=text],html body.cv-open #cv-ed input[type=number],
html body.cv-open #cv-ed textarea{cursor:text !important}
/* el dardo falso se esconde todo el tiempo que el editor este abierto —
   antes solo se escondia con el mouse encima del panel (cv-inpanel) y
   volvia a aparecer en el resto de la pagina, que confundia */
body.cv-open .fcur{display:none !important}

/* ---------- capas: el arbol de la pagina (pestana LAYERS) ---------- */
.cv-tabs button{font-size:9.5px;letter-spacing:.06em;padding:9px 2px}
.cv-lay-top{display:flex;gap:6px;align-items:center;padding:10px 12px 6px}
.cv-lay-top input{flex:1 1 auto;min-width:0;background:#161616;border:1px solid #2f2f2f;
  color:#f1efe8;border-radius:5px;padding:7px 9px;font-size:11.5px;font-family:inherit}
.cv-lay-top input:focus{outline:2px solid #bcd824;outline-offset:-1px;border-color:#bcd824}
.cv-lay-top .cv-mini{flex:0 0 auto;white-space:nowrap}
.cv-tree{padding:2px 6px 30px;display:block}
.cv-lay{display:flex;align-items:center;gap:6px;min-height:26px;padding-right:6px;
  border-radius:5px;cursor:pointer;color:#cfcfcf;font-size:11.5px;line-height:1.2;
  border:1px solid transparent}
.cv-lay:hover{background:#1e1e1e;border-color:#2f2f2f}
.cv-lay.on{background:#2a3106;border-color:#bcd824;color:#f1efe8}
.cv-lay b{font-weight:600;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cv-lay.on b{color:#bcd824}
.cv-lay-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#7d7d7d;font-size:10.5px}
.cv-lay-c{flex:0 0 14px;width:14px;height:18px;padding:0;background:transparent;border:0;
  color:#8f8f8f;font-size:10px;cursor:pointer;line-height:1}
.cv-lay-c:disabled{opacity:.25;cursor:default}
.cv-lay-c:hover:not(:disabled){color:#bcd824}
.cv-lay-i{flex:0 0 auto;font-style:normal;color:#7f7f7f;font-size:10.5px;width:16px;
  text-align:center}
.cv-lay.on .cv-lay-i{color:#bcd824}
.cv-lay-actions{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:1px}
.cv-lay-e{flex:0 0 auto;background:transparent;border:0;cursor:pointer;
  font-size:11px;opacity:.4;padding:2px 3px;line-height:1}
.cv-lay:hover .cv-lay-e{opacity:.85}
.cv-lay-e:hover{opacity:1}
/* fila "borrada" (escondida en todos los breakpoints desde LAYERS) */
.cv-lay-del{opacity:.4}
.cv-lay-del b{text-decoration:line-through}

/* ---------- WIREFRAME: cajas de colores anidadas, al estilo Divi 5 ---------- */
.cv-wf{padding:2px 6px 30px}
.cv-wf-box{border-radius:6px;margin-bottom:6px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08)}
.cv-wf-box.on{outline:2px solid #bcd824;outline-offset:1px}
.cv-wf-lvl0{background:rgba(50,107,255,.16)}
.cv-wf-lvl0>.cv-wf-head{background:#326bff}
.cv-wf-lvl1{background:rgba(10,207,160,.14)}
.cv-wf-lvl1>.cv-wf-head{background:#0acfa0}
.cv-wf-lvl2{background:#161616}
.cv-wf-lvl2>.cv-wf-head{background:#232323}
.cv-wf-group>.cv-wf-head{background:#788699}
.cv-wf-head{display:flex;align-items:center;gap:6px;padding:5px 6px;cursor:pointer;
  color:#fff;font-size:11px}
.cv-wf-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cv-wf-acts{flex:0 0 auto;display:flex;align-items:center;gap:2px;position:relative}
.cv-wf-a{flex:0 0 auto;background:rgba(0,0,0,.2);border:0;border-radius:4px;
  color:#fff;cursor:pointer;font-size:11px;padding:3px 6px;line-height:1}
.cv-wf-a:hover:not(:disabled){background:rgba(0,0,0,.4)}
.cv-wf-a:disabled{opacity:.35;cursor:default}
.cv-wf-caret{flex:0 0 14px;width:14px;height:16px;padding:0;background:transparent;
  border:0;color:#fff;opacity:.85;font-size:10px;cursor:pointer;line-height:1}
.cv-wf-caret:disabled{opacity:.25;cursor:default}
.cv-wf-kids{padding:6px 6px 0 14px}
.cv-wf-addsmall{display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  margin:6px auto 8px;padding:0;border-radius:50%;border:1px dashed #444;background:transparent;
  color:#9a9a9a;cursor:pointer;font-size:14px;line-height:1}
.cv-wf-addsmall:hover{border-color:#bcd824;color:#bcd824;border-style:solid}
.cv-wf-head.cv-wf-dragover{outline:2px dashed #bcd824;outline-offset:-2px}
.cv-wf-head[draggable]{cursor:grab}
.cv-wf-menu{display:flex;gap:4px;margin:0 6px 8px;flex-wrap:wrap}
.cv-wf-menu button{flex:1 1 auto;background:#1c1c1c;border:1px solid #333;border-radius:5px;
  color:#f1efe8;font-size:11px;padding:6px 4px;cursor:pointer}
.cv-wf-menu button:hover{border-color:#bcd824;color:#bcd824}
.cv-wf-more{position:absolute;top:100%;right:0;z-index:5;margin-top:2px;min-width:150px;
  background:#1c1c1c;border:1px solid #333;border-radius:6px;padding:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.4)}
.cv-wf-more button{display:block;width:100%;text-align:left;background:transparent;border:0;
  color:#f1efe8;font-size:11px;padding:6px 8px;border-radius:4px;cursor:pointer}
.cv-wf-more button:hover{background:#2a2a2a;color:#bcd824}

/* ---------- ELEMENTS: lista de hijos directos (pestaña CONTENT) ---------- */
.cv-els-row{display:flex;align-items:center;gap:6px;padding:6px 4px;border-radius:5px;
  border:1px solid #2a2a2a;margin-bottom:5px;background:#1a1a1a}
.cv-els-row:hover{border-color:#3a3a3a}
.cv-els-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#cfcfcf;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cv-els-row .cv-wf-acts{position:static}
.cv-els-row .cv-wf-a{background:#232323;color:#cfcfcf}
.cv-els-row .cv-wf-a:hover:not(:disabled){background:#2f2f2f;color:#bcd824}
.cv-els-add{display:block;width:100%;text-align:left;background:transparent;border:0;
  color:#9a9a9a;font-size:11.5px;padding:6px 4px;cursor:pointer}
.cv-els-add:hover{color:#bcd824}

/* ---------- barra flotante ENCIMA de la pagina ("structure: ON") ---------- */
#cv-ov{position:fixed;z-index:100002;display:none;align-items:center;gap:6px;
  padding:4px 6px;border-radius:6px;color:#fff;font-size:11px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none}
#cv-ov.on{display:flex;pointer-events:auto}
#cv-ov.cv-wf-lvl0{background:#326bff}
#cv-ov.cv-wf-lvl1{background:#0acfa0}
#cv-ov.cv-wf-lvl2{background:#232323}
#cv-ov.cv-wf-group{background:#788699}
#cv-ov .cv-wf-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* aviso dentro de un grupo del panel */
.cv-warn{margin:8px 0 6px;padding:8px 10px;border-radius:7px;
  background:rgba(188,216,36,.10);border:1px solid rgba(188,216,36,.4);
  color:#dbe98f;font-size:11px;line-height:1.5}

/* boton mini activo (divider, etc.) */
.cv-mini.on{background:#bcd824;color:#141414;border-color:#bcd824}

/* ---------- vista por breakpoint: la pagina dentro de un marco ---------- */
#cv-frame{position:fixed;inset:0;z-index:99000;background:#0a0a0a;
  display:flex;flex-direction:column;align-items:center}
.cv-frame__bar{flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:9px 14px;color:#8f8f8f;font:11px/1 "Manrope",sans-serif;
  letter-spacing:.08em}
.cv-frame__box{flex:1 1 auto;min-height:0;background:#141414;box-sizing:content-box;
  border:1px solid #2c2c2c;border-bottom:0;border-radius:10px 10px 0 0;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 80px rgba(0,0,0,.7);max-width:100%}
.cv-frame__box iframe{width:100%;height:100%;border:0;display:block;background:#141414}

/* campo que esta mostrando un token de la Escala CV */
#cv-ed input.cv-tok{color:#bcd824;font-weight:600;letter-spacing:.01em}
#cv-ed input.cv-tok::placeholder{color:rgba(188,216,36,.72);font-weight:600}