/* Revelação Online – front-end (escopo #ro-app) */ /* ---- reset defensivo: neutraliza heranças do tema/Elementor ---- */ #ro-app{all:initial !important;display:block !important;font-family:'Poppins',system-ui,sans-serif !important;font-size:15px !important;line-height:1.55 !important;color:var(--ink) !important;text-align:left !important;letter-spacing:normal !important;text-transform:none !important} #ro-app *,#ro-app *::before,#ro-app *::after{box-sizing:border-box !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;font:inherit !important;color:inherit !important;line-height:inherit !important;letter-spacing:inherit !important;text-transform:none !important;text-align:inherit !important;list-style:none !important;text-decoration:none !important;border-radius:0 !important;box-shadow:none !important;float:none !important;position:static !important;max-width:none !important;min-width:0 !important;width:auto !important;height:auto !important;transform:none !important;transition:none !important} #ro-app img,#ro-app svg{display:block !important;max-width:100% !important;height:auto !important} #ro-app button,#ro-app input,#ro-app select,#ro-app textarea,#ro-app a{font:inherit !important;color:inherit !important;background:none !important;border:0 !important;outline:none !important;-webkit-appearance:none !important;appearance:none !important} #ro-app button{cursor:pointer !important} #ro-app table{border-collapse:collapse !important;width:100% !important} #ro-app b,#ro-app strong{font-weight:600 !important} /* v11: paleta nova da Dalcolor — creme #F6F1EB, preto #1A1A1A, amarelo #FAB617, laranja #FC7D1D, vermelho #FF003C (botões em #EE0038 para contraste com texto branco) */ #ro-app{--bg:#F6F1EB;--surface:#FFFFFF;--ink:#1A1A1A;--muted:#6B6866;--line:#E6E0D7;--soft:#EFE9E0;--ok:#1F9D5B;--warn:#C7811A;--err:#D3403B;--accent:#EE0038;--accent-dark:#D6003A;--purple:#FAB617;--yellow:#FAB617;--orange:#FC7D1D;--red:#FF003C;--wa:#25D366;--wa-dark:#1DB954;--r:14px;--r-sm:10px;--shadow:0 1px 2px rgba(26,26,26,.04), 0 8px 24px rgba(26,26,26,.06)} #ro-app .ro-card, #ro-app .ro-line, #ro-app .ro-group, #ro-app .ro-choice, #ro-app .ro-modal-box{color:var(--ink) !important} #ro-app .ro-logo{height:26px !important;width:auto !important} #ro-app .ro-logo-dark{display:none !important} #ro-app *{box-sizing:border-box !important;margin:0 !important;padding:0 !important} #ro-app [hidden]{display:none!important} #ro-app{font-family:'Poppins',system-ui,sans-serif !important;background:var(--bg) !important;color:var(--ink) !important;line-height:1.55 !important;font-size:15px !important;min-height:100vh !important} #ro-app button, #ro-app input, #ro-app select, #ro-app textarea{font:inherit !important;color:inherit !important} #ro-app button{cursor:pointer !important;border:0 !important;background:none !important} #ro-app img{display:block !important;max-width:100% !important} #ro-app .ro-sr{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important} #ro-app :focus-visible{outline:2px solid var(--accent) !important;outline-offset:3px !important;border-radius:6px !important} #ro-app /* shell */ .ro-shell{max-width:1040px !important;margin:0 auto !important;padding:20px 20px 64px !important} #ro-app .ro-top{display:flex !important;align-items:center !important;justify-content:space-between !important;padding:6px 0 18px !important} #ro-app .ro-brand{font-weight:600 !important;font-size:15px !important;letter-spacing:-.01em !important} #ro-app .ro-brand span{color:var(--muted) !important;font-weight:400 !important} #ro-app /* stepper */ .ro-steps{display:flex !important;gap:6px !important;margin:0 0 28px !important} #ro-app .ro-steps li{list-style:none !important;flex:1 !important;display:flex !important;flex-direction:column !important;gap:8px !important;font-size:12px !important;color:var(--muted) !important;font-weight:500 !important} #ro-app .ro-steps li::before{content:"" !important;display:block !important;height:4px !important;border-radius:99px !important;background:var(--line) !important;transition:background .25s !important} #ro-app .ro-steps li.ro-done::before{background:var(--ink) !important;opacity:.35 !important} #ro-app .ro-steps li.ro-on{color:var(--ink) !important} #ro-app .ro-steps li.ro-on::before{background:var(--accent) !important} @media(max-width:600px){#ro-app .ro-steps li{font-size:11px !important} #ro-app .ro-steps li:not(.ro-on) span{display:none !important} } #ro-app /* views */ .ro-view{display:none !important} #ro-app .ro-view.ro-on{display:block !important;animation:ro-in .28s ease !important} @keyframes ro-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){#ro-app .ro-view.ro-on{animation:none !important} } #ro-app h1{font-size:clamp(34px,6vw,60px) !important;font-weight:600 !important;line-height:1.05 !important;letter-spacing:-.03em !important;max-width:12ch !important} #ro-app h2{font-size:clamp(24px,3.5vw,32px) !important;font-weight:600 !important;line-height:1.15 !important;letter-spacing:-.02em !important} #ro-app h3{font-size:16px !important;font-weight:600 !important} #ro-app .ro-lead{font-size:clamp(16px,2vw,19px) !important;color:var(--muted) !important;max-width:44ch !important;margin-top:18px !important;font-weight:300 !important} #ro-app .ro-hint{font-size:13px !important;color:var(--muted) !important} #ro-app /* buttons */ .ro-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;border-radius:99px !important;font-weight:500 !important;transition:transform .12s,background .15s,opacity .15s !important;white-space:nowrap !important} #ro-app .ro-btn:active{transform:scale(.985) !important} #ro-app .ro-btn-primary{background:var(--accent) !important;color:#fff !important;padding:18px 34px !important;font-size:17px !important} #ro-app .ro-btn-primary:hover{background:var(--accent-dark) !important} #ro-app .ro-btn-wa{background:var(--wa) !important;color:#fff !important;padding:14px 22px !important;font-size:14px !important;width:100% !important;margin-top:10px !important;text-decoration:none !important} #ro-app .ro-btn-wa:hover{background:var(--wa-dark) !important} #ro-app .ro-btn-wa svg{width:18px !important;height:18px !important;fill:#fff !important} #ro-app .ro-btn-primary[disabled]{opacity:.35 !important;cursor:not-allowed !important} #ro-app .ro-btn-xl{padding:24px 44px !important;font-size:20px !important;font-weight:600 !important} #ro-app .ro-btn-ghost{background:transparent !important;border:1.5px solid var(--line) !important;color:var(--ink) !important;padding:14px 24px !important;font-size:15px !important} #ro-app .ro-btn-ghost:hover{border-color:var(--ink) !important} #ro-app .ro-btn-text{color:var(--muted) !important;padding:10px 4px !important;font-size:14px !important} #ro-app .ro-btn-text:hover{color:var(--ink) !important} #ro-app .ro-btn-danger{color:var(--err) !important} #ro-app /* hero */ .ro-hero{padding:40px 0 20px !important;display:grid !important;grid-template-columns:1.2fr 1fr !important;gap:40px !important;align-items:end !important} #ro-app .ro-hero-visual{position:relative !important;height:340px !important} #ro-app .ro-print{position:absolute !important;background:#fff !important;box-shadow:var(--shadow) !important;border-radius:3px !important;padding:6px 6px 22px !important;border:1px solid var(--line) !important} #ro-app .ro-print i{display:block !important;height:100% !important;border-radius:2px !important;background:linear-gradient(135deg,#FFE3A6,#FFB39C) !important} #ro-app .ro-print:nth-child(1){width:150px !important;height:200px !important;right:170px !important;top:0 !important;transform:rotate(-8deg) !important} #ro-app .ro-print:nth-child(2){width:180px !important;height:130px !important;right:10px !important;top:70px !important;transform:rotate(4deg) !important} #ro-app .ro-print:nth-child(3){width:120px !important;height:150px !important;right:120px !important;top:190px !important;transform:rotate(-2deg) !important;padding-bottom:30px !important} #ro-app .ro-hero-actions{margin-top:36px !important;display:flex !important;flex-direction:column !important;gap:14px !important;align-items:stretch !important;max-width:420px !important} #ro-app .ro-hero-actions .ro-btn-xl{width:100% !important} #ro-app .ro-hero-secondary{display:flex !important;gap:12px !important} #ro-app .ro-hero-secondary .ro-btn{flex:1 !important;padding-left:12px !important;padding-right:12px !important} @media(max-width:760px){#ro-app .ro-hero-actions{max-width:none !important} #ro-app .ro-hero{grid-template-columns:1fr !important;padding-top:16px !important} #ro-app .ro-hero-visual{height:220px !important;order:-1 !important} #ro-app .ro-print:nth-child(1){width:110px !important;height:150px !important;right:150px !important} #ro-app .ro-print:nth-child(2){width:140px !important;height:100px !important;right:0 !important;top:40px !important} #ro-app .ro-print:nth-child(3){width:90px !important;height:115px !important;right:100px !important;top:120px !important} #ro-app .ro-btn-xl{width:100% !important;padding:22px !important} } #ro-app /* layout 2 col */ .ro-grid{display:grid !important;grid-template-columns:1fr 340px !important;gap:28px !important;align-items:start !important} @media(max-width:820px){#ro-app .ro-grid{grid-template-columns:1fr !important} } #ro-app .ro-card{background:var(--surface) !important;border-radius:var(--r) !important;box-shadow:var(--shadow) !important} #ro-app .ro-card-body{padding:22px !important} #ro-app .ro-sticky{position:sticky !important;top:20px !important} #ro-app .ro-head{display:flex !important;justify-content:space-between !important;align-items:flex-end !important;gap:16px !important;margin-bottom:22px !important;flex-wrap:wrap !important} #ro-app .ro-head p{color:var(--muted) !important;margin-top:6px !important;max-width:52ch !important} #ro-app /* order line */ .ro-line{background:var(--surface) !important;border-radius:var(--r) !important;box-shadow:var(--shadow) !important;padding:18px !important;margin-bottom:12px !important;display:grid !important;grid-template-columns:auto 1fr !important;gap:18px !important;position:relative !important} #ro-app .ro-preview{width:88px !important;height:88px !important;display:grid !important;place-items:center !important;background:var(--soft) !important;border-radius:var(--r-sm) !important} #ro-app .ro-preview b{background:#fff !important;border:1px solid #cfd3d9 !important;box-shadow:0 1px 2px rgba(0,0,0,.08) !important;transition:width .2s,height .2s !important} #ro-app .ro-fields{display:grid !important;grid-template-columns:minmax(0,1fr) 160px !important;gap:12px !important} #ro-app .ro-field label{display:block !important;font-size:12px !important;color:var(--muted) !important;margin-bottom:6px !important;font-weight:500 !important} #ro-app .ro-ctrl{width:100% !important;height:46px !important;border:1.5px solid var(--line) !important;border-radius:var(--r-sm) !important;padding:0 14px !important;background:var(--surface) !important;appearance:none !important;-webkit-appearance:none !important} #ro-app .ro-ctrl:focus{border-color:var(--ink) !important;outline:0 !important} #ro-app select.ro-ctrl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.ro-w3.ro-org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;padding-right:38px !important} #ro-app .ro-qty{display:flex !important;border:1.5px solid var(--line) !important;border-radius:var(--r-sm) !important;height:46px !important;overflow:hidden !important} #ro-app .ro-qty button{width:44px !important;font-size:20px !important;color:var(--muted) !important} #ro-app .ro-qty button:hover{background:var(--soft) !important;color:var(--ink) !important} #ro-app .ro-qty input{flex:1 !important;border:0 !important;background:transparent !important;text-align:center !important;min-width:0 !important;font-weight:500 !important;-moz-appearance:textfield !important} #ro-app .ro-qty input::-webkit-inner-spin-button{-webkit-appearance:none !important} #ro-app .ro-opts{grid-column:1/-1 !important;display:flex !important;gap:18px !important;flex-wrap:wrap !important} #ro-app .ro-seg{display:inline-flex !important;background:var(--soft) !important;padding:4px !important;border-radius:99px !important;gap:2px !important} #ro-app .ro-seg button{padding:8px 16px !important;border-radius:99px !important;font-size:13px !important;color:var(--muted) !important;font-weight:500 !important} #ro-app .ro-seg button.ro-on{background:var(--surface) !important;color:var(--ink) !important;box-shadow:0 1px 3px rgba(0,0,0,.1) !important} #ro-app .ro-seg.ro-off{pointer-events:none !important} #ro-app .ro-seg.ro-off button{color:var(--muted) !important} #ro-app .ro-seg.ro-off button.ro-on{color:var(--ink) !important} #ro-app .ro-seg[data-f=papel].ro-off, #ro-app .ro-seg[data-f=borda].ro-off{opacity:.4 !important} #ro-app .ro-opt-label{font-size:12px !important;color:var(--muted) !important;margin-bottom:6px !important;font-weight:500 !important;display:flex !important;align-items:center !important;gap:6px !important} #ro-app .ro-tip{position:relative !important;width:16px !important;height:16px !important;border-radius:50% !important;border:1.5px solid var(--muted) !important;color:var(--muted) !important;font-size:10px !important;font-weight:600 !important;display:inline-grid !important;place-items:center !important;line-height:1 !important;cursor:help !important} #ro-app .ro-tip:hover, #ro-app .ro-tip.ro-on, #ro-app .ro-tip:focus-visible{border-color:var(--ink) !important;color:var(--ink) !important} #ro-app .ro-tip span{display:none !important;position:absolute !important;left:0 !important;top:22px !important;z-index:20 !important;width:240px !important;background:var(--ink) !important;color:#fff !important;font-weight:400 !important;font-size:12px !important;line-height:1.45 !important;padding:10px 12px !important;border-radius:8px !important;box-shadow:var(--shadow) !important;text-align:left !important} #ro-app .ro-tip:hover span, #ro-app .ro-tip.ro-on span, #ro-app .ro-tip:focus-visible span{display:block !important} #ro-app .ro-soft-note{grid-column:1/-1 !important;font-size:12px !important;color:var(--muted) !important;margin-top:-2px !important} #ro-app .ro-note-warn{grid-column:1/-1 !important;background:#FFF8E1 !important;border-left:3px solid #E0A800 !important;border-radius:6px var(--r-sm) var(--r-sm) 6px !important;padding:9px 12px !important;font-size:12px !important;color:#6B5200 !important} #ro-app .ro-notice{grid-column:1/-1 !important;background:#FFEBEF !important;border-left:3px solid var(--accent) !important;border-radius:6px var(--r-sm) var(--r-sm) 6px !important;padding:10px 14px !important;font-size:13px !important;color:#4A1A28 !important} #ro-app .ro-line-foot{grid-column:1/-1 !important;display:flex !important;justify-content:space-between !important;align-items:center !important;padding-top:12px !important;border-top:1px solid var(--line) !important;font-size:13px !important;color:var(--muted) !important} #ro-app .ro-line-foot strong{color:var(--ink) !important;font-size:15px !important} #ro-app .ro-remove{position:absolute !important;top:10px !important;right:10px !important;width:32px !important;height:32px !important;border-radius:50% !important;color:var(--muted) !important;display:grid !important;place-items:center !important} #ro-app .ro-remove:hover{background:var(--soft) !important;color:var(--err) !important} @media(max-width:520px){#ro-app .ro-line{grid-template-columns:1fr !important} #ro-app .ro-preview{width:100% !important;height:70px !important} #ro-app .ro-fields{grid-template-columns:1fr !important} } #ro-app .ro-add{width:100% !important;border:2px solid var(--ink) !important;border-radius:99px !important;padding:18px !important;color:var(--ink) !important;font-weight:600 !important;font-size:16px !important;background:var(--surface) !important;margin-top:6px !important;transition:background .15s,color .15s !important} #ro-app .ro-add:hover{background:var(--ink) !important;color:#fff !important} #ro-app /* summary */ .ro-sum-row{display:flex !important;justify-content:space-between !important;gap:12px !important;padding:10px 0 !important;border-bottom:1px solid var(--line) !important;font-size:14px !important} #ro-app .ro-sum-row small{display:block !important;color:var(--muted) !important;font-size:12px !important} #ro-app .ro-min-bar{position:relative !important;margin-top:12px !important;padding:12px 14px 16px !important;border-radius:var(--r-sm) !important;background:#FFE3E9 !important;color:#8A0A2E !important;font-size:13px !important;overflow:hidden !important} #ro-app .ro-min-bar i{position:absolute !important;left:0 !important;bottom:0 !important;height:4px !important;background:var(--accent) !important;transition:width .3s !important} #ro-app .ro-min-bar::after{content:"" !important;position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;height:4px !important;background:rgba(240,17,79,.15) !important;z-index:-1 !important} #ro-app .ro-banner{display:flex !important;gap:12px !important;align-items:center !important;background:var(--surface) !important;border-left:4px solid var(--accent) !important;border-radius:var(--r-sm) !important;box-shadow:var(--shadow) !important;padding:14px 18px !important;margin-bottom:18px !important;font-size:14px !important} #ro-app .ro-banner b{color:var(--accent) !important} #ro-app .ro-sum-total{display:flex !important;justify-content:space-between !important;align-items:baseline !important;padding-top:16px !important} #ro-app .ro-sum-total b{font-size:26px !important;font-weight:600 !important;letter-spacing:-.02em !important} #ro-app .ro-empty{color:var(--muted) !important;font-size:14px !important;padding:12px 0 !important} #ro-app .ro-actions{display:flex !important;flex-direction:column !important;gap:10px !important;margin-top:18px !important} #ro-app .ro-actions .ro-btn{width:100% !important} #ro-app .ro-nav{display:flex !important;justify-content:space-between !important;align-items:center !important;margin-top:24px !important;gap:12px !important;flex-wrap:wrap !important} #ro-app /* upload */ .ro-group{background:var(--surface) !important;border-radius:var(--r) !important;box-shadow:var(--shadow) !important;padding:20px !important;margin-bottom:14px !important} #ro-app .ro-group-head{display:flex !important;justify-content:space-between !important;align-items:center !important;gap:12px !important;margin-bottom:14px !important;flex-wrap:wrap !important} #ro-app .ro-tag{font-size:12px !important;color:var(--muted) !important;background:var(--soft) !important;padding:4px 10px !important;border-radius:99px !important} #ro-app .ro-tag.ro-ok{background:#E6F5EC !important;color:var(--ok) !important} #ro-app .ro-tag.ro-warn{background:#FBEFDD !important;color:var(--warn) !important} #ro-app .ro-drop{display:block !important;border:1.5px dashed var(--line) !important;border-radius:var(--r-sm) !important;padding:26px !important;text-align:center !important;color:var(--muted) !important;transition:border-color .15s,background .15s !important;cursor:pointer !important} #ro-app .ro-drop:hover, #ro-app .ro-drop.ro-over{border-color:var(--accent) !important;background:var(--soft) !important;color:var(--ink) !important} #ro-app .ro-drop input{display:none !important} #ro-app .ro-thumbs{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(76px,1fr)) !important;gap:8px !important;margin-top:14px !important} #ro-app .ro-thumb{position:relative !important;aspect-ratio:1 !important;border-radius:8px !important;overflow:hidden !important;background:var(--soft) !important} #ro-app .ro-thumb img{width:100% !important;height:100% !important;object-fit:cover !important} #ro-app .ro-or{display:flex !important;align-items:center !important;gap:12px !important;margin:16px 0 12px !important;color:var(--muted) !important;font-size:12px !important} #ro-app .ro-or::before, #ro-app .ro-or::after{content:"" !important;flex:1 !important;height:1px !important;background:var(--line) !important} #ro-app .ro-thumb button{position:absolute !important;top:4px !important;right:4px !important;width:22px !important;height:22px !important;border-radius:50% !important;background:rgba(26,26,26,.75) !important;color:#fff !important;font-size:12px !important;line-height:1 !important} #ro-app /* payment */ .ro-choices{display:grid !important;gap:10px !important} #ro-app .ro-choice{display:flex !important;gap:14px !important;align-items:flex-start !important;padding:16px !important;border:1.5px solid var(--line) !important;border-radius:var(--r-sm) !important;cursor:pointer !important;background:var(--surface) !important;transition:border-color .15s !important} #ro-app .ro-choice:hover{border-color:#B7BCC4 !important} #ro-app .ro-choice.ro-on{border-color:var(--accent) !important} #ro-app .ro-choice input{margin-top:4px !important;accent-color:var(--accent) !important} #ro-app .ro-choice b{display:block !important;font-weight:500 !important} #ro-app .ro-choice small{color:var(--muted) !important;font-size:13px !important} #ro-app .ro-choice .ro-price{margin-left:auto !important;font-size:13px !important;color:var(--muted) !important;white-space:nowrap !important} #ro-app .ro-pix{display:none !important;margin-top:22px !important;padding-top:22px !important;border-top:1px solid var(--line) !important} #ro-app .ro-pix.ro-on{display:block !important} #ro-app .ro-pix-wrap{display:grid !important;grid-template-columns:auto 1fr !important;gap:22px !important;align-items:start !important} #ro-app #qr{width:196px !important;height:196px !important;padding:10px !important;background:#fff !important;border:1px solid var(--line) !important;border-radius:var(--r-sm) !important} #ro-app #qr img, #ro-app #qr canvas{width:176px!important;height:176px!important} #ro-app .ro-copy{display:flex !important;gap:8px !important;margin-top:10px !important} #ro-app .ro-copy input{flex:1 !important;font-size:12px !important;color:var(--muted) !important} @media(max-width:560px){#ro-app .ro-pix-wrap{grid-template-columns:1fr !important;justify-items:center !important} } #ro-app .ro-stores{margin-top:56px !important;padding-top:28px !important;border-top:1px solid var(--line) !important;display:grid !important;grid-template-columns:1fr 1fr !important;gap:28px !important} #ro-app .ro-stores h3{margin-bottom:6px !important} #ro-app .ro-stores p{font-size:14px !important;color:var(--muted) !important} #ro-app .ro-stores .ro-hint{grid-column:1/-1 !important} @media(max-width:600px){#ro-app .ro-stores{grid-template-columns:1fr !important} } #ro-app .ro-finish{text-align:center !important;padding:60px 20px !important} #ro-app .ro-finish .ro-ico{width:64px !important;height:64px !important;border-radius:50% !important;background:#E6F5EC !important;color:var(--ok) !important;display:grid !important;place-items:center !important;margin:0 auto 22px !important;font-size:28px !important} #ro-app .ro-note{margin-top:14px !important;padding:12px 14px !important;background:var(--soft) !important;border-radius:var(--r-sm) !important;font-size:13px !important;color:var(--muted) !important} #ro-app .ro-progress{height:4px !important;background:var(--line) !important;border-radius:99px !important;overflow:hidden !important;margin-top:12px !important;display:none !important} #ro-app .ro-progress i{display:block !important;height:100% !important;width:0 !important;background:var(--accent) !important;transition:width .2s !important} #ro-app /* modal */ .ro-modal{position:fixed !important;inset:0 !important;background:rgba(26,26,26,.45) !important;display:none !important;align-items:center !important;justify-content:center !important;padding:20px !important;z-index:50 !important} #ro-app .ro-modal.ro-on{display:flex !important} #ro-app .ro-modal-box{background:var(--surface) !important;border-radius:var(--r) !important;max-width:560px !important;width:100% !important;max-height:85vh !important;overflow:auto !important;padding:26px !important} #ro-app .ro-modal-box .ro-head{margin-bottom:16px !important} #ro-app .ro-tabs{display:flex !important;gap:4px !important;background:var(--soft) !important;padding:4px !important;border-radius:99px !important;margin-bottom:8px !important} #ro-app .ro-tabs button{flex:1 !important;padding:11px 12px !important;border-radius:99px !important;font-size:13px !important;font-weight:500 !important;color:var(--muted) !important} #ro-app .ro-tabs button.ro-on{background:var(--surface) !important;color:var(--ink) !important;box-shadow:0 1px 3px rgba(0,0,0,.12) !important} #ro-app table{width:100% !important;border-collapse:collapse !important;font-size:14px !important} #ro-app th, #ro-app td{text-align:left !important;padding:10px 0 !important;border-bottom:1px solid var(--line) !important} #ro-app th{font-weight:500 !important;color:var(--muted) !important;font-size:12px !important} #ro-app td:last-child, #ro-app th:last-child{text-align:right !important} /* utilitários (substituem estilos inline, que perderiam para o !important) */ #ro-app [hidden],#ro-app .ro-none{display:none !important} #ro-app .ro-mt6{margin-top:6px !important} #ro-app .ro-mt10{margin-top:10px !important} #ro-app .ro-mt12{margin-top:12px !important} #ro-app .ro-mt14{margin-top:14px !important} #ro-app .ro-mt16{margin-top:16px !important} #ro-app .ro-mt22{margin-top:22px !important} #ro-app .ro-mb14{margin-bottom:14px !important} #ro-app .ro-mb10{margin-bottom:10px !important} #ro-app .ro-two{display:grid !important;grid-template-columns:1fr 1fr !important;gap:12px !important} @media(max-width:520px){#ro-app .ro-two{grid-template-columns:1fr !important}} #ro-app .ro-preview b{width:var(--pw) !important;height:var(--ph) !important} #ro-app .ro-min-bar i{width:var(--p) !important} #ro-app .ro-progress i{width:var(--p) !important} #ro-app .ro-obs{grid-column:1/-1 !important} (r'style="text-align:left"', r'class="ro-left"'), #ro-app .ro-tab-pane[hidden]{display:none !important} #ro-app .ro-thead{padding-top:14px !important;border:0 !important;font-weight:500 !important;text-align:left !important} /* ===================== mobile (≤820px) ===================== */ #ro-app .ro-bar{display:none !important} #ro-app .ro-seg .ro-short{display:none !important} @media(max-width:820px){ #ro-app .ro-shell{padding:14px 14px 110px !important} #ro-app .ro-top{padding:2px 0 14px !important} #ro-app .ro-steps{margin-bottom:20px !important} #ro-app .ro-head{margin-bottom:16px !important} #ro-app .ro-head .ro-btn-ghost{width:100% !important} #ro-app h2{font-size:24px !important} #ro-app .ro-lead{font-size:16px !important} #ro-app .ro-banner{font-size:13px !important;padding:12px 14px !important} /* iOS dá zoom em campos com fonte < 16px */ #ro-app .ro-ctrl,#ro-app .ro-qty input,#ro-app select,#ro-app input,#ro-app textarea{font-size:16px !important} /* linhas do pedido */ #ro-app .ro-line{grid-template-columns:1fr !important;padding:16px !important;gap:14px !important} #ro-app .ro-preview{display:none !important} #ro-app .ro-fields{grid-template-columns:1fr 132px !important;gap:10px !important} #ro-app .ro-remove{top:8px !important;right:8px !important} #ro-app .ro-opts{gap:12px !important} #ro-app .ro-opts > div{width:100% !important} #ro-app .ro-seg{display:flex !important;width:100% !important} #ro-app .ro-seg button{flex:1 !important;text-align:center !important;padding:10px 8px !important;white-space:nowrap !important} #ro-app .ro-seg .ro-full{display:none !important} #ro-app .ro-seg .ro-short{display:inline !important} #ro-app .ro-tip span{left:auto !important;right:-8px !important;width:min(260px,80vw) !important} #ro-app .ro-add{padding:16px !important;font-size:15px !important} /* upload */ #ro-app .ro-group{padding:16px !important} #ro-app .ro-drop{padding:20px 14px !important} #ro-app .ro-drop .ro-arraste{display:none !important} #ro-app .ro-thumbs{grid-template-columns:repeat(auto-fill,minmax(64px,1fr)) !important} /* recebimento */ #ro-app .ro-choice{padding:14px !important;gap:10px !important;flex-wrap:wrap !important} #ro-app .ro-choice > div{flex:1 1 0 !important;min-width:0 !important} #ro-app .ro-choice .ro-price{margin-left:0 !important;width:100% !important;padding-left:26px !important;font-weight:500 !important;color:var(--ink) !important} #ro-app .ro-choice small{font-size:12px !important} /* resumo: cards sem sticky, com respiro */ #ro-app .ro-sticky{position:static !important} #ro-app .ro-card-body{padding:18px !important} #ro-app .ro-sum-total b{font-size:22px !important} /* pix final */ #ro-app .ro-pix-wrap{grid-template-columns:1fr !important;justify-items:center !important;text-align:center !important} #ro-app .ro-copy{width:100% !important} /* hero */ #ro-app .ro-hero{padding-top:8px !important;gap:24px !important} #ro-app h1{font-size:clamp(30px,9vw,40px) !important} #ro-app .ro-hero-secondary{flex-wrap:wrap !important} #ro-app .ro-hero-secondary .ro-btn{flex:1 1 150px !important;padding:14px 10px !important;font-size:14px !important} #ro-app .ro-stores{margin-top:36px !important} /* modal ocupa a tela toda */ #ro-app .ro-modal{padding:0 !important;align-items:flex-end !important} #ro-app .ro-modal-box{max-height:92vh !important;border-radius:18px 18px 0 0 !important;padding:20px 18px calc(20px + env(safe-area-inset-bottom)) !important} #ro-app .ro-tabs button{font-size:12px !important;padding:10px 6px !important} /* barra fixa de ação */ #ro-app .ro-bar{display:flex !important;position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;z-index:40 !important;align-items:center !important;gap:12px !important;padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important;background:var(--surface) !important;border-top:1px solid var(--line) !important;box-shadow:0 -8px 24px rgba(26,26,26,.08) !important} #ro-app .ro-bar[hidden]{display:none !important} #ro-app .ro-bar > div{flex:1 !important;min-width:0 !important;line-height:1.2 !important} #ro-app .ro-bar small{display:block !important;font-size:11px !important;color:var(--muted) !important} #ro-app .ro-bar b{font-size:18px !important;font-weight:600 !important;letter-spacing:-.02em !important} #ro-app .ro-bar .ro-btn{padding:14px 20px !important;font-size:15px !important;white-space:nowrap !important} #ro-app .ro-bar .ro-btn[disabled]{opacity:.35 !important} #ro-app .ro-nav{margin-top:18px !important} #ro-app .ro-finish,#ro-app #v5 .ro-head p{text-align:left !important} } @media(max-width:380px){ #ro-app .ro-fields{grid-template-columns:1fr !important} #ro-app .ro-bar .ro-btn{padding:14px 14px !important;font-size:14px !important} } #ro-app table td.ro-thead,#ro-app table td.ro-left{text-align:left !important} #ro-app .ro-tabs .ro-short{display:none !important} @media(max-width:820px){ #ro-app .ro-fields{grid-template-columns:1fr !important} #ro-app .ro-tabs .ro-full{display:none !important} #ro-app .ro-tabs .ro-short{display:inline !important} #ro-app .ro-tabs button{font-size:13px !important;padding:11px 8px !important} #ro-app .ro-tip span{left:0 !important;right:auto !important} #ro-app .ro-shell,#ro-app .ro-view,#ro-app .ro-grid,#ro-app .ro-line,#ro-app .ro-group{max-width:100% !important;overflow-x:clip !important} } /* ===================== v1.0.3 ===================== */ html.ro-lock,html.ro-lock body{overflow:hidden !important} #ro-app .ro-modal{-webkit-overflow-scrolling:touch !important} #ro-app .ro-modal-box{position:relative !important;max-height:min(88vh,calc(100dvh - 32px)) !important;overscroll-behavior:contain !important} #ro-app .ro-tabs button{text-align:center !important;display:flex !important;align-items:center !important;justify-content:center !important} #ro-app .ro-notice-ok{background:#E6F5EC !important;border-left-color:var(--ok) !important;color:#14532D !important} #ro-app .ro-textarea{height:auto !important;min-height:96px !important;padding:12px 14px !important;resize:vertical !important;line-height:1.5 !important} #ro-app .ro-wa-quiet{justify-content:center !important;color:var(--muted) !important;font-size:13px !important;width:100% !important;margin-top:4px !important} #ro-app .ro-wa-quiet svg{width:16px !important;height:16px !important;fill:var(--muted) !important} #ro-app .ro-wa-quiet:hover{color:var(--ink) !important} #ro-app .ro-pix-side .ro-btn-wa{margin-top:0 !important} #ro-app .ro-seg button.ro-on{box-shadow:0 1px 3px rgba(0,0,0,.12),inset 0 0 0 1.5px var(--ink) !important;font-weight:600 !important} #ro-app .ro-add{text-align:center !important;justify-content:center !important} #ro-app .ro-qty{align-items:stretch !important} #ro-app .ro-qty button{flex:0 0 44px !important;width:44px !important;display:grid !important;place-items:center !important;line-height:1 !important;padding:0 !important} #ro-app .ro-qty input{width:auto !important;min-width:0 !important;flex:1 1 auto !important;padding:0 !important} /* tabela de valores */ #ro-app .ro-pcard{background:var(--soft) !important;border-radius:var(--r-sm) !important;padding:14px !important;margin-top:10px !important} #ro-app .ro-pcard-h{display:flex !important;align-items:center !important;gap:12px !important;margin-bottom:10px !important} #ro-app .ro-pcard-h > div{flex:1 !important;min-width:0 !important;line-height:1.25 !important} #ro-app .ro-pcard-h b{display:block !important;font-weight:600 !important;font-size:15px !important} #ro-app .ro-pcard-h small{display:block !important;color:var(--muted) !important;font-size:12px !important} #ro-app .ro-pcard-note .ro-pcard-h{margin-bottom:0 !important} #ro-app .ro-pv{width:48px !important;height:48px !important;flex:0 0 48px !important;display:grid !important;place-items:center !important;background:var(--surface) !important;border-radius:8px !important;border:1px solid var(--line) !important;font-size:20px !important} #ro-app .ro-pv b{display:block !important;background:#fff !important;border:1px solid #B9C1CB !important;box-shadow:0 1px 2px rgba(0,0,0,.12) !important;width:var(--pw) !important;height:var(--ph) !important;border-radius:1px !important} #ro-app .ro-pv-ima{background:#FFE3E9 !important;border-color:#FFB9C7 !important} #ro-app .ro-pv-price{font-weight:600 !important;color:var(--accent) !important;white-space:nowrap !important;font-size:14px !important} #ro-app .ro-tiers{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:8px !important} #ro-app .ro-tier{background:var(--surface) !important;border-radius:8px !important;padding:10px 10px 9px !important;display:flex !important;flex-direction:column !important;gap:1px !important;min-width:0 !important} #ro-app .ro-tier small{font-size:11px !important;color:var(--muted) !important;line-height:1.25 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important} #ro-app .ro-tier b{font-size:15px !important;font-weight:600 !important;letter-spacing:-.01em !important} #ro-app .ro-tier i{font-style:normal !important;font-size:10px !important;color:var(--muted) !important} #ro-app .ro-plabel{font-size:11px !important;font-weight:600 !important;letter-spacing:.06em !important;text-transform:uppercase !important;color:var(--muted) !important;margin:20px 0 -2px !important} #ro-app .ro-tiers-g{grid-template-columns:repeat(4,1fr) !important} #ro-app .ro-tiers-g .ro-tier small{font-size:12px !important;color:var(--ink) !important} #ro-app .ro-tiers-g .ro-tier b{font-size:14px !important;font-weight:500 !important;color:var(--muted) !important} /* tabela de tamanhos */ #ro-app .ro-szgrid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important} #ro-app .ro-pcard-sz{display:flex !important;align-items:center !important;gap:12px !important;margin-top:0 !important} #ro-app .ro-pcard-sz > div{line-height:1.25 !important;min-width:0 !important} #ro-app .ro-pcard-sz b{display:block !important;font-weight:600 !important;font-size:14px !important} #ro-app .ro-pcard-sz small{display:block !important;color:var(--muted) !important;font-size:12px !important} #ro-app .ro-pcard-sz .ro-pv{width:60px !important;height:60px !important;flex-basis:60px !important} @media(max-width:820px){ #ro-app .ro-tiers,#ro-app .ro-tiers-g{grid-template-columns:1fr 1fr !important} #ro-app .ro-szgrid{grid-template-columns:1fr !important} #ro-app select.ro-ctrl{text-align:center !important;text-align-last:center !important;padding-left:38px !important} #ro-app .ro-modal{align-items:flex-end !important} #ro-app .ro-modal-box{max-height:calc(100dvh - 24px) !important;max-height:calc(100svh - 24px) !important} #ro-app .ro-pix-side{width:100% !important} } #ro-app .ro-tier small{white-space:normal !important;overflow:visible !important} #ro-app .ro-modal-box{max-width:640px !important} /* ===================== v1.0.4 ===================== */ /* modal: cabeçalho fixo com fundo sólido, conteúdo rola por baixo sem transparência */ #ro-app .ro-modal-box{padding:0 !important;display:flex !important;flex-direction:column !important} #ro-app .ro-modal-box > .ro-head{flex:0 0 auto !important;margin:0 !important;padding:20px 20px 14px !important;background:var(--surface) !important;border-bottom:1px solid var(--line) !important;border-radius:var(--r) var(--r) 0 0 !important} #ro-app .ro-modal-box > *:not(.ro-head){padding:0 20px !important;overflow-y:auto !important} #ro-app .ro-modal-box > *:last-child{padding-bottom:20px !important} #ro-app .ro-tabs{margin:14px 0 4px !important} /* tabela de valores com cor */ #ro-app .ro-ptable{width:100% !important;border-collapse:separate !important;border-spacing:0 !important;margin-top:10px !important} #ro-app .ro-ptable td{padding:9px 12px !important;border-bottom:1px solid var(--line) !important;font-size:14px !important} #ro-app .ro-ptable td:last-child{text-align:right !important;white-space:nowrap !important;color:var(--muted) !important;font-size:12px !important} #ro-app .ro-ptable td:last-child b{color:var(--ink) !important;font-size:15px !important;font-weight:600 !important;margin-right:3px !important} #ro-app .ro-ptable tr:nth-child(even) td{background:#FBF9F6 !important} #ro-app .ro-prow td{background:#FFEBEF !important;border-bottom:0 !important;padding-top:14px !important;font-weight:600 !important;color:var(--accent) !important;font-size:15px !important;border-radius:8px 8px 0 0 !important} #ro-app .ro-ptable tr.ro-prow:nth-child(even) td{background:#FFEBEF !important} #ro-app .ro-psz{font-weight:400 !important;color:var(--muted) !important;font-size:12px !important;margin-left:4px !important} #ro-app .ro-ptable-g td{font-size:13px !important;color:var(--muted) !important} #ro-app .ro-ptable-g td:last-child b{font-size:14px !important;font-weight:500 !important;color:var(--muted) !important} #ro-app .ro-padd{display:flex !important;align-items:center !important;gap:12px !important;margin-top:18px !important;padding:12px 14px !important;background:#FFEBEF !important;border-radius:var(--r-sm) !important} #ro-app .ro-padd-ico{width:36px !important;height:36px !important;flex:0 0 36px !important;display:grid !important;place-items:center !important;background:var(--surface) !important;border-radius:8px !important;font-size:18px !important} #ro-app .ro-padd-price{font-weight:600 !important;color:var(--accent) !important;white-space:nowrap !important;font-size:14px !important} /* checkbox do ímã */ #ro-app .ro-check{grid-column:1/-1 !important;display:flex !important;align-items:center !important;gap:10px !important;padding:11px 14px !important;background:var(--soft) !important;border-radius:var(--r-sm) !important;cursor:pointer !important;user-select:none !important} #ro-app .ro-check input{width:20px !important;height:20px !important;flex:0 0 20px !important;accent-color:var(--accent) !important;-webkit-appearance:checkbox !important;appearance:auto !important;cursor:pointer !important} #ro-app .ro-check b{font-weight:500 !important} #ro-app .ro-check i{font-style:normal !important;color:var(--muted) !important;font-size:13px !important} /* +/- sem zoom nem seleção no toque */ #ro-app .ro-qty,#ro-app .ro-qty button,#ro-app .ro-seg button,#ro-app .ro-tabs button,#ro-app .ro-btn,#ro-app .ro-tip{touch-action:manipulation !important;-webkit-user-select:none !important;user-select:none !important;-webkit-touch-callout:none !important;-webkit-tap-highlight-color:transparent !important} #ro-app .ro-drop-full{border-style:solid !important;color:var(--muted) !important;cursor:default !important;background:var(--soft) !important} #ro-app .ro-head-btns{display:flex !important;gap:10px !important} #ro-app .ro-aside-slim .ro-card-body{padding:18px !important} #ro-app .ro-bar.ro-bar-solo > div{display:none !important} #ro-app .ro-bar.ro-bar-solo .ro-btn{width:100% !important} @media(max-width:820px){ #ro-app .ro-head-btns{width:100% !important} #ro-app .ro-head-btns .ro-btn{flex:1 !important;padding-left:8px !important;padding-right:8px !important;font-size:13px !important} #ro-app .ro-modal-box > .ro-head{padding:18px 16px 12px !important;border-radius:18px 18px 0 0 !important} #ro-app .ro-modal-box > *:not(.ro-head){padding:0 16px !important} #ro-app .ro-ptable td{padding:9px 8px !important} } /* cabeçalho do tamanho alinhado à esquerda na tabela de valores */ #ro-app .ro-ptable .ro-prow td{text-align:left !important} #ro-app .ro-ptable .ro-prow td:last-child{text-align:left !important} /* desktop: WhatsApp discreto também na etapa 2 (mantém verde só onde é CTA) */ #ro-app .ro-modal-box{max-height:min(84vh,760px) !important} /* ===================== v1.0.5 ===================== */ #ro-app,#ro-app *{word-spacing:normal !important} #ro-app .ro-ptable-g .ro-prow td{font-size:13px !important;letter-spacing:.04em !important;text-transform:uppercase !important} #ro-app .ro-ptable-g{margin-top:18px !important} #ro-app .ro-padd{margin-top:16px !important;padding:0 !important;background:transparent !important;display:block !important;font-size:13px !important;color:var(--muted) !important} #ro-app .ro-padd b{color:var(--ink) !important;font-weight:600 !important} #ro-app .ro-aprox{color:var(--accent) !important;font-size:11px !important;margin-top:2px !important} #ro-app .ro-check span{display:inline-flex !important;gap:6px !important;align-items:baseline !important;flex-wrap:wrap !important} #ro-app .ro-topbtns{display:flex !important;gap:16px !important;align-items:center !important} #ro-app .ro-invalid{border-color:var(--err) !important} #ro-app .ro-pix-foot{margin-top:14px !important;display:flex !important;justify-content:center !important} #ro-app .ro-pix-foot .ro-wa-quiet{width:auto !important} #ro-app #v5 .ro-grid{grid-template-columns:1fr !important;max-width:720px !important} /* X da miniatura */ #ro-app .ro-thumb button{top:5px !important;right:5px !important;width:24px !important;height:24px !important;border-radius:50% !important;background:var(--accent) !important;display:grid !important;place-items:center !important;padding:0 !important;box-shadow:0 1px 4px rgba(0,0,0,.35) !important;transition:transform .12s !important} #ro-app .ro-thumb button:hover{transform:scale(1.1) !important;background:var(--accent-dark) !important} #ro-app .ro-thumb button svg{width:12px !important;height:12px !important;stroke:#fff !important;stroke-width:2.6 !important;stroke-linecap:round !important;fill:none !important} /* excedente de fotos */ #ro-app .ro-fix{margin-top:12px !important;padding:14px !important;border-radius:var(--r-sm) !important;background:#FFF8E1 !important;border-left:3px solid #E0A800 !important} #ro-app .ro-fix-h{display:flex !important;justify-content:space-between !important;align-items:center !important;gap:10px !important;flex-wrap:wrap !important} #ro-app .ro-fix-h b{font-weight:600 !important;color:#6B5200 !important} #ro-app .ro-fix-h span{font-size:12px !important;background:#E0A800 !important;color:#fff !important;padding:2px 9px !important;border-radius:99px !important;font-weight:500 !important} #ro-app .ro-fix p{font-size:13px !important;color:#6B5200 !important;margin:6px 0 12px !important} #ro-app .ro-fix-b{display:flex !important;gap:8px !important;flex-wrap:wrap !important} #ro-app .ro-btn-sm{padding:10px 16px !important;font-size:13px !important} @media(max-width:820px){ #ro-app h1{font-size:clamp(26px,7.6vw,34px) !important;max-width:none !important} #ro-app .ro-fix-b .ro-btn{flex:1 1 100% !important} #ro-app .ro-topbtns{gap:12px !important} } #ro-app .ro-padd b{display:inline !important;font-weight:600 !important;color:var(--ink) !important} /* ===================== v1.0.6 ===================== */ #ro-app .ro-ptable-ima{margin-top:18px !important} #ro-app .ro-ptable-ima .ro-prow td{background:var(--accent) !important;color:#fff !important} #ro-app .ro-ptable-ima td:last-child b{color:var(--accent) !important} #ro-app .ro-check span{display:inline !important} #ro-app .ro-check b{margin-right:6px !important} #ro-app .ro-check i{color:var(--muted) !important;font-size:13px !important} #ro-app .ro-notice-calc{background:#FFF8E1 !important;border-left-color:#E0A800 !important;color:#6B5200 !important} /* ===================== v1.0.7 ===================== */ #ro-app .ro-ptable .ro-prow td,#ro-app .ro-ptable tr.ro-prow:nth-child(even) td{background:var(--accent) !important;color:#fff !important} #ro-app .ro-psz{color:rgba(255,255,255,.82) !important} #ro-app .ro-fix-ok{background:#E6F5EC !important;border-left-color:var(--ok) !important} #ro-app .ro-fix-ok b{color:#14532D !important;font-weight:600 !important} #ro-app .ro-fix-ok p{color:#14532D !important;margin:4px 0 0 !important} #ro-app .ro-fix p b{color:inherit !important} #ro-app .ro-pay-note{font-size:12px !important;color:var(--muted) !important;margin-top:8px !important;text-align:center !important} /* ===================== v1.0.8: hero com foto ===================== */ #ro-app .ro-hero-visual{height:auto !important;position:relative !important;display:flex !important;justify-content:center !important} #ro-app .ro-hero-visual img{width:100% !important;max-width:420px !important;height:auto !important;border-radius:var(--r) !important;display:block !important} @media(max-width:760px){ #ro-app .ro-hero-visual{height:auto !important;order:-1 !important;margin-bottom:4px !important} #ro-app .ro-hero-visual img{max-width:300px !important} } /* hero: imagem e texto alinhados, sem excesso de altura */ #ro-app .ro-hero{align-items:center !important} #ro-app .ro-hero-visual img{max-width:340px !important;margin-left:auto !important} @media(max-width:760px){#ro-app .ro-hero-visual img{max-width:260px !important;margin:0 auto !important}} /* hero mobile: recorte próprio, cantos arredondados e respiro certo */ #ro-app .ro-hero-visual picture{display:block !important;width:100% !important} @media(max-width:760px){ #ro-app .ro-hero{gap:18px !important} #ro-app .ro-hero-visual{margin:0 -14px 2px !important;width:calc(100% + 28px) !important} #ro-app .ro-hero-visual img{max-width:none !important;width:100% !important;border-radius:0 !important;aspect-ratio:4/3 !important;object-fit:cover !important;object-position:center 42% !important} }