.elementor-widget-section .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-section .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-spacer .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-spacer .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-4895 .elementor-element.elementor-element-a97bcda{--spacer-size:25px;}.elementor-widget-eael-dual-color-header .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-eael-dual-color-header .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-eael-dual-color-header .eael-dch-separator-wrap i{color:var( --e-global-color-primary );}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dch-separator-wrap .separator-one{background-color:#000000;margin-right:0px;width:15%;height:5px;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dch-separator-wrap .separator-two{background-color:#D51623;margin-left:0px;width:15%;height:5px;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dual-header{margin:38px 38px 38px 38px;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dual-header i{font-size:96px;color:#D51623;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dual-header img{height:96px;width:96px;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dual-header .eael-dch-svg-icon{height:96px;width:96px;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dual-header .eael-dch-svg-icon svg{height:96px;width:96px;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dual-header svg{fill:#D51623;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dual-header .title{color:#000000;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dual-header .title span.lead{color:#D51623;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dual-header .title, .elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dual-header .title span{font-style:italic;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dual-header .subtext{color:#000000;}.elementor-4895 .elementor-element.elementor-element-6daecc7 .eael-dch-separator-wrap{justify-content:center;}.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-4895 .elementor-element.elementor-element-2552ac9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4895 .elementor-element.elementor-element-2552ac9:not(.elementor-motion-effects-element-type-background), .elementor-4895 .elementor-element.elementor-element-2552ac9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-widget-heading .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4895 .elementor-element.elementor-element-e3bed87{text-align:center;}.elementor-4895 .elementor-element.elementor-element-e3bed87 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;font-style:italic;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-4895 .elementor-element.elementor-element-0559358{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;}.elementor-4895 .elementor-element.elementor-element-0559358:not(.elementor-motion-effects-element-type-background), .elementor-4895 .elementor-element.elementor-element-0559358 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://gclex.es/wp-content/uploads/2025/03/Gemini_Generated_Image_c9q63nc9q63nc9q6-1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-4895 .elementor-element.elementor-element-0559358::before, .elementor-4895 .elementor-element.elementor-element-0559358 > .elementor-background-video-container::before, .elementor-4895 .elementor-element.elementor-element-0559358 > .e-con-inner > .elementor-background-video-container::before, .elementor-4895 .elementor-element.elementor-element-0559358 > .elementor-background-slideshow::before, .elementor-4895 .elementor-element.elementor-element-0559358 > .e-con-inner > .elementor-background-slideshow::before, .elementor-4895 .elementor-element.elementor-element-0559358 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-4895 .elementor-element.elementor-element-f2108d6{--display:flex;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-4895 .elementor-element.elementor-element-cebdbdc > .elementor-widget-container{background-color:var( --e-global-color-astglobalcolor4 );}@media(min-width:1025px){.elementor-4895 .elementor-element.elementor-element-0559358:not(.elementor-motion-effects-element-type-background), .elementor-4895 .elementor-element.elementor-element-0559358 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for html, class: .elementor-element-cebdbdc *//* Custom styles for drag-and-drop and finer control */ .dragging { opacity: 0.5; border: 2px dashed #3b82f6; /* blue-500 */ } /* CORRECTED: drag-over styles */ .drag-over { border: 2px dashed #10b981; /* emerald-500 */ background-color: #d1fae5; /* emerald-100 */ } .dark .drag-over { /* Apply dark mode style using .dark prefix */ background-color: #065f46; /* emerald-800 dark */ } /* Cell specific styles */ .collage-cell-placeholder { /* Base styles for placeholder */ position: relative; /* Needed for absolute children */ overflow: hidden; /* Clip children */ } /* Apply outline directly to the cell when selected */ .collage-cell-placeholder.selected { outline: 3px solid #3b82f6 !important; /* Use important if needed */ z-index: 10 !important; /* Ensure it's above others */ cursor: pointer; /* Indicate clickable */ } /* Ensure images within cells cover the area but can be moved/scaled */ .collage-image { position: absolute; cursor: grab; touch-action: none; /* Prevent default touch actions like scrolling */ user-select: none; /* Prevent text selection during drag */ width: 100%; height: 100%; /* --- REVERTED: Back to cover to fill the cell --- */ object-fit: cover; /* Cover the area, maintain aspect ratio */ top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transform-origin: center center; /* Add transition for smoother zoom */ transition: transform 0.1s ease-out; } /* Removed .collage-image-container styles */ /* Hide file input visually but keep it accessible */ #image-upload { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Custom scrollbar for preview area */ .thumbnail-container::-webkit-scrollbar { height: 8px; } .thumbnail-container::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; } .thumbnail-container::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; } .thumbnail-container::-webkit-scrollbar-thumb:hover { background: #64748b; } .dark .thumbnail-container::-webkit-scrollbar-track { background: #334155; } /* Dark mode scrollbar */ .dark .thumbnail-container::-webkit-scrollbar-thumb { background: #64748b; } .dark .thumbnail-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Number Overlay Styles */ .number-overlay { position: absolute; z-index: 5; /* Below selection outline, above image */ padding: 0.2em 0.4em; font-size: 12px; /* Base size, adjust as needed */ font-weight: bold; line-height: 1; min-width: 1.5em; /* Ensure minimum width for single digits */ text-align: center; pointer-events: none; /* Allow clicks to pass through */ display: none; /* Hidden by default, shown via JS */ /* Ensure font is consistent for canvas rendering */ font-family: sans-serif; } .number-overlay.shape-square { border-radius: 0.15em; } /* Slight rounding for square */ .number-overlay.shape-circle { border-radius: 9999px; } /* Full circle */ /* Positioning classes (applied via JS) */ .number-overlay.pos-top-left { top: 5px; left: 5px; } .number-overlay.pos-top-right { top: 5px; right: 5px; } .number-overlay.pos-bottom-left { bottom: 5px; left: 5px; } .number-overlay.pos-bottom-right { bottom: 5px; right: 5px; } /* Feedback message style */ #feedback-message { transition: opacity 0.5s ease-out; } /* Temporary image placeholder for number rendering */ .temp-number-image { position: absolute; z-index: 6; /* Above original overlay position */ pointer-events: none; } /* Styles for Resizable Handles */ .resize-handle { position: absolute; background: rgba(59, 130, 246, 0.5); /* Slightly transparent */ z-index: 30; /* High z-index */ transition: background-color 0.2s ease; pointer-events: auto; /* Make handles interactive */ opacity: 0; /* Hidden by default, shown on hover */ } /* Show handles when hovering over the container IF it's a grid layout */ #collage-canvas.is-grid-layout:hover .resize-handle { opacity: 1; } .resize-handle-h { height: 8px; cursor: row-resize; left: 10px; /* Margin from sides */ right: 10px; margin-top: -4px; /* Center vertically */ } .resize-handle-v { width: 8px; cursor: col-resize; top: 10px; /* Margin from top/bottom */ bottom: 10px; margin-left: -4px; /* Center horizontally */ } .resize-handle:hover, .resize-handle.active { background: #3b82f6; /* Solid blue on hover/active */ opacity: 1; /* Ensure visible when active */ } /* Dark Mode Toggle Switch Styles */ .dark-mode-switch { display: flex; align-items: center; gap: 0.5rem; /* space-x-2 */ padding-bottom: 1rem; /* pb-4 */ border-bottom: 1px solid #e5e7eb; /* border-b border-gray-200 */ margin-bottom: 1rem; /* mb-4 */ } .dark .dark-mode-switch { border-bottom-color: #4b5563; /* dark:border-gray-600 */ } .dark-mode-switch label { font-size: 0.875rem; /* text-sm */ font-weight: 500; /* font-medium */ color: #374151; /* text-gray-700 */ } .dark .dark-mode-switch label { color: #d1d5db; /* dark:text-gray-300 */ } /* Basic switch appearance */ .toggle-checkbox:checked { background-color: #2563eb; /* bg-blue-600 */ border-color: #2563eb; /* border-blue-600 */ } .toggle-checkbox { appearance: none; width: 3rem; /* w-12 */ height: 1.5rem; /* h-6 */ border-radius: 9999px; /* rounded-full */ background-color: #e5e7eb; /* bg-gray-200 */ border: 1px solid #d1d5db; /* border border-gray-300 */ position: relative; cursor: pointer; transition: background-color 0.2s ease-in-out; } .dark .toggle-checkbox { background-color: #4b5563; /* dark:bg-gray-600 */ border-color: #6b7280; /* dark:border-gray-500 */ } .toggle-checkbox::before { content: ''; position: absolute; left: 2px; top: 2px; width: 1.25rem; /* h-5 */ height: 1.25rem; /* w-5 */ border-radius: 9999px; /* rounded-full */ background-color: white; transition: transform 0.2s ease-in-out; } .toggle-checkbox:checked::before { transform: translateX(1.5rem); /* Translate the knob */ }/* End custom CSS */