@import"https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--sidebar-width: 360px;--bg-dark: #1c1c1c;--bg-panel: #242424;--bg-input: #2e2e2e;--bg-preview: #f0f0f0;--text-primary: #fafafa;--text-secondary: #999;--text-muted: #666;--accent: #dcdcdc;--accent-hover: #c8c8c8;--accent-text: #000;--cta: #fafafa;--cta-hover: #e0e0e0;--success: #4ade80;--warning: #fbbf24;--error: #f87171;--border: #333;--border-light: #3a3a3a;--radius: 8px;--radius-sm: 6px}html,body{height:100%;font-family:Inter Tight,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#111;color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased}#app{display:flex;height:100vh}#sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--bg-dark);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:#444 transparent}#sidebar::-webkit-scrollbar{width:6px}#sidebar::-webkit-scrollbar-track{background:transparent}#sidebar::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.sidebar-header{padding:24px 20px 20px;border-bottom:1px solid var(--border)}.brand-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.brand{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}.btn-lang{padding:4px 10px;background:var(--bg-input);border:1px solid var(--border-light);border-radius:4px;color:var(--text-secondary);font-family:inherit;font-size:.68rem;font-weight:600;letter-spacing:.06em;cursor:pointer;transition:all .15s}.btn-lang:hover{background:#383838;color:var(--text-primary);border-color:#555}.sidebar-header h1{font-size:1.3rem;font-weight:300;letter-spacing:.01em;color:var(--text-primary)}.subtitle{font-size:.75rem;color:var(--text-secondary);margin-top:6px;line-height:1.4}.panel{padding:20px;border-bottom:1px solid var(--border)}.panel-header{display:flex;align-items:baseline;gap:8px;margin-bottom:16px}.panel-header h2{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--text-secondary)}.panel-header .panel-hint{font-size:.65rem;color:var(--text-muted);font-weight:400}.form-group{margin-bottom:16px}.form-group:last-child{margin-bottom:0}.form-group label{display:block;font-size:.78rem;font-weight:500;color:var(--text-primary);margin-bottom:6px}.form-group .field-desc{display:block;font-size:.65rem;color:var(--text-muted);margin-top:-2px;margin-bottom:6px;line-height:1.4}.form-group label .val{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}.form-group label .unit{color:var(--text-muted);font-weight:400;font-size:.7rem}textarea,select,input[type=text],input[type=email],input[type=number]{width:100%;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:.82rem;transition:border-color .15s;resize:vertical}textarea:focus,select:focus,input[type=text]:focus,input[type=email]:focus,input[type=number]:focus{outline:none;border-color:var(--accent)}textarea::placeholder,input::placeholder{color:var(--text-muted)}select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;height:6px}.btn{display:block;width:100%;padding:12px 16px;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;letter-spacing:.02em}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-primary{background:var(--cta);color:var(--accent-text)}.btn-primary:hover:not(:disabled){background:var(--cta-hover)}.btn-secondary{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-light)}.btn-secondary:hover:not(:disabled){background:#383838;border-color:#555}.btn-cta{background:var(--cta);color:var(--accent-text);font-size:.85rem;padding:14px 16px;letter-spacing:.04em}.btn-cta:hover:not(:disabled){background:var(--cta-hover)}.btn-whatsapp{display:flex;align-items:center;justify-content:center;gap:8px;background:#25d366;color:#fff;text-decoration:none;text-align:center;padding:12px 16px;border-radius:var(--radius-sm);font-family:inherit;font-size:.82rem;font-weight:600;transition:background .15s}.btn-whatsapp:hover{background:#1fb855}.hint{font-size:.7rem;color:var(--text-muted);margin-top:8px;line-height:1.4}#validationResults{margin-bottom:12px}.check-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:.78rem;line-height:1.4}.check-icon{flex-shrink:0;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;margin-top:1px}.check-pass .check-icon{background:var(--success);color:#000}.check-warning .check-icon{background:var(--warning);color:#000}.check-error .check-icon{background:var(--error);color:#fff}.check-label{font-weight:600;margin-right:4px}.btn-fix{display:inline-block;padding:2px 10px;margin-left:6px;background:var(--warning);color:#000;border:none;border-radius:4px;font-size:.62rem;font-weight:700;font-family:inherit;cursor:pointer;vertical-align:middle;text-transform:uppercase;letter-spacing:.04em;transition:background .15s}.btn-fix:hover{background:#e5a800}.btn-fix-all{margin-top:8px;background:var(--warning);color:#000}.btn-fix-all:hover{background:#e5a800}.divider{display:flex;align-items:center;gap:12px;margin:12px 0;font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border);margin-top:auto}.sidebar-footer p{font-size:.68rem;color:var(--text-muted);line-height:1.5;text-align:center}.sidebar-footer a{color:var(--text-secondary);text-decoration:underline;text-underline-offset:2px}.sidebar-footer a:hover{color:var(--text-primary)}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(100px);background:var(--success);color:#000;padding:14px 28px;border-radius:var(--radius);font-size:.85rem;font-weight:600;font-family:inherit;z-index:100;opacity:0;transition:transform .3s ease,opacity .3s ease;pointer-events:none}.toast.show{transform:translate(-50%) translateY(0);opacity:1}.form-row{display:flex;gap:12px}.form-row .form-group{flex:1}.hidden{display:none!important}#preview{flex:1;position:relative;background:var(--bg-preview);overflow:hidden}#canvas{display:block;width:100%;height:100%}.overlay{position:absolute;pointer-events:none;z-index:10}.overlay-bottom{bottom:16px;left:50%;transform:translate(-50%);background:#000000bf;color:#fff;padding:8px 16px;border-radius:var(--radius);font-size:.78rem;font-family:Inter Tight,monospace;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.overlay-top{top:16px;left:50%;transform:translate(-50%);background:#0009;color:#ccc;padding:6px 14px;border-radius:var(--radius);font-size:.68rem;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#loading{top:50%;left:50%;transform:translate(-50%,-50%);background:#000000d9;color:#fff;padding:20px 40px;border-radius:var(--radius);font-size:.95rem;font-weight:500;z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}#loading.hidden{display:none}@media(max-width:768px){html,body{height:auto;overflow-y:auto}#app{flex-direction:column;height:auto;min-height:100vh}#sidebar{width:100%;min-width:100%;max-height:none;overflow-y:visible;border-right:none;border-bottom:1px solid var(--border);order:2}#preview{order:1;height:55vw;min-height:260px;max-height:380px;flex:none;position:sticky;top:0;z-index:30;border-bottom:1px solid var(--border)}.overlay-top{font-size:.58rem;padding:4px 10px;top:8px}.overlay-bottom{font-size:.68rem;padding:6px 12px;bottom:8px}}
