.elementor-383 .elementor-element.elementor-element-a5e1481{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-16bc773 *//* --- LOADER STYLES --- */
#vndl-loader {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: #FF3300; z-index: 9999999; display: flex;
  flex-direction: column; justify-content: center; align-items: center;
  color: #fff; font-family: "Monument", sans-serif; text-transform: uppercase;
  transition: opacity 0.4s ease;
}
#vndl-loader-text { font-size: 42px; color: black; font-weight: bold; margin-bottom: 30px; text-align: center; padding: 0 20px; }
#vndl-loader-bar { width: 650px; height: 8px; background: #FF3300; border: 1px solid #000; border-radius: 2px; overflow: hidden; box-sizing: border-box; }
#vndl-progress { width: 0%; height: 100%; background: #fff; transition: width 0.2s ease; }
@media (max-width: 768px) {
  #vndl-loader-text { font-size: 25px !important; }
  #vndl-loader-bar { width: 300px !important; }
}

/* --- TUS ESTILOS --- */
/* Soluciona arrastre nativo que rompía el paneo */
#interactiveLayer img, #interactiveLayer video {
  -webkit-user-drag: none;
  user-select: none;
}
.dark-mode .vndl-text-block2 {
  color: white !important;
}
/* Indicador de herramienta activa */
#menu span.active-tool { box-shadow: inset 0 0 0 2px #000000; }
body.dark-mode #menu span.active-tool { box-shadow: inset 0 0 0 3px #ffffff; }

#centro-wrapper {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; pointer-events: none; user-select: none; z-index: 1;
}
#centro-wrapper img { grid-area: 1 / 1; place-self: center; pointer-events: none; }

.vndl-text-block {
  position: absolute; transform: translate(-50%, -50%); padding: 5px 20px;
  border-radius: 30px; font-size: 30px; text-align: center; background: #ffffff;
  color: #000000; border: 2px solid black; font-family: "interd"; cursor: pointer;
  z-index: 3; pointer-events: auto; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vndl-text-block2 {
  position: absolute; transform: translate(-50%, -50%); border-radius: 20px;
  font-size: 16px; text-align: center; color: #000000; font-family: "interd";
  cursor: pointer; pointer-events: auto; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body.dark-mode .vndl-text-block { background: #000000; color: #ffffff; border: 2px solid #fff; }

.vndl-interactivo {
  position: absolute; transform: translate(-50%, -50%); cursor: pointer;
  pointer-events: auto; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#design-frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 3213px; height: 1991px; pointer-events: none; z-index: 10;
}
#design-frame .vndl-interactivo, #design-frame .vndl-text-block {
  position: absolute; transform: none; transform-origin: center center; pointer-events: auto;
}

html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; width: 100%; font-family: 'interd', sans-serif; }
.dark-mode img.menu-icon { filter: invert(1) !important; }
body.is-vndl-cursor #world-container { cursor: var(--vndl-cursor) !important; }
span img { max-height: 20px; }

#world-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; touch-action: none; background: #f0f0f0; }
#world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }

/* BLINDAJE DE EVENTOS SVG */
#drawLayer { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; cursor: inherit; contain: strict; shape-rendering: optimizeSpeed; background: transparent; }
.dibujando #drawLayer { pointer-events: all !important; }
#interactiveLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
#interactiveLayer > * { position: absolute; pointer-events: auto; }

/* Desactivar interacciones html al dibujar */
.dibujando #interactiveLayer * { pointer-events: none !important; }

/* UI & MENÚS */
#menu { position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; gap: 12px; z-index: 10; user-select: none; }
#menu span { background: #ffffff; color: #000000; padding: 12px 24px; border-radius: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); font-weight: 600; cursor: pointer; transition: transform 0.2s; display: flex; align-items: center; gap: 8px; }
#menu span:hover { transform: scale(1.05); }
.menu-icon { height: 20px; width: 20px; object-fit: contain; }
#menu img.no-invert, .submenu img.no-invert { filter: none !important; }

body.dark-mode #menu span, body.dark-mode #drawOptions > *, body.dark-mode .submenu img { background: #000; color: #fff; border-color: #fff; }
body.dark-mode #menu span img:not(.no-invert), body.dark-mode .submenu img:not(.no-invert) { filter: none; }

.submenu, #drawOptions { position: fixed; bottom: 85px; left: 50%; transform: translateX(-50%); z-index: 11; }
.submenu { display: none; flex-wrap: wrap; gap: 12px; background: transparent; padding: 0; }
.submenu.active { display: flex; }
.submenu img { background: #ffffff; padding: 8px 24px; border-radius: 40px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); width: auto; height: 40px; object-fit: contain; cursor: pointer; transition: transform 0.2s; }
.submenu img:hover { transform: translateY(-3px) scale(1.05); }

#drawOptions { display: none; gap: 12px; align-items: center; user-select: none; background: transparent; }
#drawOptions.active { display: flex; }
.range-pill { display: flex; align-items: center; background: #ffffff; border: 2px solid #000000; border-radius: 40px; padding: 0 15px; height: 38px; box-sizing: border-box; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.dot-small { width: 3px; height: 3px; background: #000; border-radius: 50%; margin-right: 10px; }
.dot-big { width: 8px; height: 8px; background: #000; border-radius: 50%; margin-left: 10px; }
body.dark-mode .dot-small, body.dark-mode .dot-big { background: #fff; }

#grosor { -webkit-appearance: none; width: 120px; background: transparent; cursor: pointer; }
#grosor:focus { outline: none; }
#grosor::-webkit-slider-runnable-track { width: 100%; height: 2px; background: #000000; }
body.dark-mode #grosor::-webkit-slider-runnable-track { background: #ffffff; }
#grosor::-webkit-slider-thumb { height: 16px; width: 16px; border-radius: 50%; background: #ffffff; border: 2px solid #000000; -webkit-appearance: none; margin-top: -7px; }
body.dark-mode #grosor::-webkit-slider-thumb { background: #000; border-color: #fff; }

#color { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 38px; height: 38px; background: transparent; border: none; cursor: pointer; padding: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 50%; }
#color::-webkit-color-swatch-wrapper { padding: 0; }
#color::-webkit-color-swatch { border: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); }
#color::-moz-color-swatch { border: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); }

#modeBtn { background: #ffffff; color: #000000; border: none; padding: 0 20px; height: 38px; border-radius: 40px; cursor: pointer; font-weight: 600; font-family: inherit; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.2s; }
#modeBtn:hover { transform: scale(1.05); }

#qrBox { position: fixed; top: 10px; right: 10px; background: #fff; padding: 10px; border-radius: 10px; z-index: 20; text-align: center; }
#sticker-ghost { position: fixed; pointer-events: none; z-index: 9999; width: 150px; height: 150px; transform: translate(-50%, -50%); display: none; opacity: 0.7; will-change: left, top; }
body.dark-mode #world-container { background: #111; }

@keyframes orbitarCircular {
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(10px, -10px); }
  50%  { transform: translate(0px, -20px); } 
  75%  { transform: translate(-10px, -10px); }
  100% { transform: translate(0px, 0px); }   
}
img[alt="cursorcito"] { animation: orbitarCircular 4s ease-in infinite; }

@keyframes girarEje {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
img[alt="Artist Logo"] { animation: girarEje 8s linear infinite; transform-origin: center center; }

@media (max-width: 1024px) { #sticker-ghost { display: none !important; } }
@media (max-width: 768px) { 
  #qrBox, #cursorBtn, #cursorMenu, #cursorMenu.active { display: none !important; } 
  #menu span { padding: 10px 15px; font-size: 0.9em; } 
}
@media(max-width:767px){
  #menu span { padding: 2px 20px 2px 10px; gap: 4px; font-size: 14px; }
  .menu-icon { height: 20px; width: 10px; }
  #menu { gap: 4px; }
  .range-pill { height: 30px; }
  .submenu, #drawOptions { bottom: 55px; width: 90%; }
  #grosor { width: 60px; }
  .submenu.active, #drawOptions.active { justify-content: center; align-items: center; }
  #modeBtn { max-width: 80px; }
  #color { width: 25px; height: 25px; }
}

/* --- FIX DE TOOLTIPS Y ENLACES (CRÍTICO) --- */
.vndl-tooltip {
  opacity: 0;
  pointer-events: none !important; /* Fuerza a que no estorben al ratón */
  transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.vndl-tooltip.visible {
  opacity: 1;
  pointer-events: auto !important; /* Clicables solo cuando se ven */
}
[data-link], [data-group] {
  cursor: pointer !important;
}
/* --- EFECTO SCALE AL HACER HOVER EN GRUPOS --- */
.vndl-scale-down {
  /* Al usar "scale" en lugar de "transform", NO rompemos las coordenadas de los elementos */
  scale: 0.95 !important; 
}
@media (max-width: 1024px) {
  .vndl-tooltip {
    /* Transición suave para el fade-in/out */
    transition: opacity 0.8s ease-out !important;
    display: block !important; 
    opacity: 0; /* Por defecto invisibles en mobile */
    pointer-events: none;
  }
  .vndl-tooltip.visible {
    opacity: 1 !important;
  }
}

@keyframes parpadeoLive {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }/* End custom CSS */
/* Start custom CSS */.elementor-element.elementor-element-b23b6b5.e-con-full.fixedbotombar.e-flex.e-con.e-parent.e-lazyloaded {
    display: none;
}
.elementor-element.elementor-element-18e8da0.e-con-full.e-flex.e-con.e-child {
    opacity: 0;
}/* End custom CSS */