/* Soluthe — páginas de produto (e-loja/, e-check/, e-mesa/, e-zap/ ...) Carregar DEPOIS de soluthe.css. Estrutura e componentes vêm do site; a identidade do produto entra por variáveis no : */ .pr{--p-accent:var(--green);--p-accent-light:var(--green-light)} /* Hero */ .pr-hero{position:relative;z-index:1;padding:clamp(24px,4vw,56px) var(--pad-x) clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(36px,5vw,64px);align-items:center} .pr-hero .sl-lead{max-width:540px;color:var(--green-deep);margin:26px 0 34px} .pr-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px} .pr-link{font:700 15px var(--f-body);color:var(--ink);border-bottom:2px solid currentColor;padding-bottom:2px} .pr-link:hover{color:var(--white)} .pr-name{display:inline-flex;align-items:center;gap:10px;font:800 22px var(--f-head);letter-spacing:-.03em;color:var(--ink);margin-bottom:18px} .pr-name small{font:600 12px var(--f-body);letter-spacing:0;color:var(--green-deep);background:rgba(6,13,8,.1);padding:5px 10px;border-radius:999px} /* Cupom térmico (hero) */ .pr-stage{position:relative;display:grid;justify-items:center;padding-top:22px} .pr-printer{width:min(400px,100%);height:26px;border-radius:14px 14px 6px 6px;background:var(--ink);box-shadow:0 18px 40px rgba(10,61,34,.4);position:relative;z-index:2} .pr-printer::after{content:"";position:absolute;left:10%;right:10%;bottom:6px;height:4px;border-radius:2px;background:#000} .pr-receipt{width:min(340px,calc(100% - 44px));margin-top:-8px;background:#FCFCF7;color:#1B211C;font:500 12.5px/1.55 var(--f-mono);padding:26px 22px 30px;box-shadow:0 30px 60px rgba(10,61,34,.35);position:relative; -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle at 6px 0,transparent 6px,#000 6.5px) bottom/12px 10px repeat-x; mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,radial-gradient(circle at 6px 0,transparent 6px,#000 6.5px) bottom/12px 10px repeat-x; animation:pr-print 2.4s cubic-bezier(.3,.7,.3,1) .3s both} @keyframes pr-print{from{clip-path:inset(0 0 100% 0);transform:translateY(-24px)}to{clip-path:inset(0 0 0 0);transform:none}} .pr-r-c{text-align:center} .pr-r-b{font-weight:700} .pr-r-hr{border:0;border-top:1px dashed rgba(27,33,28,.4);margin:12px 0} .pr-r-row{display:flex;justify-content:space-between;gap:12px} .pr-r-row span:last-child{white-space:nowrap} .pr-r-muted{color:#5B6A5D} .pr-r-total{display:flex;justify-content:space-between;font:800 17px var(--f-head);letter-spacing:-.02em;margin-top:4px} .pr-r-ok{display:flex;gap:12px;align-items:center;margin-top:4px} .pr-r-ok svg{width:64px;height:64px;flex-shrink:0} .pr-r-ok b{display:block;color:var(--green-dark)} .pr-stamp{position:absolute;right:-6px;bottom:22%;background:var(--ink);color:var(--green-light);font:700 12px var(--f-body);padding:10px 14px;border-radius:12px;box-shadow:0 14px 34px rgba(6,13,8,.35);transform:rotate(-4deg);z-index:3;animation:pr-stamp .4s cubic-bezier(.34,1.56,.64,1) 2.6s both} @keyframes pr-stamp{from{opacity:0;transform:rotate(-4deg) scale(.6)}to{opacity:1;transform:rotate(-4deg) scale(1)}} @media (max-width:520px){.pr-stamp{right:4px;bottom:-14px}.pr-receipt{font-size:11.5px;padding:22px 16px 26px}} /* Módulos */ .pr-mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:36px 40px} .pr-mod{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--p-accent);padding-top:20px} .pr-mod h3{font:800 26px/1.1 var(--f-head);letter-spacing:-.04em;color:var(--text)} .pr-mod p{font:400 15px/1.65 var(--f-body);color:var(--muted);text-wrap:pretty;max-width:46ch} .pr-mod ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .pr-mod li{font:500 12px var(--f-body);color:var(--text-2);background:rgba(255,255,255,.05);border:1px solid var(--line);padding:5px 10px;border-radius:6px} /* Fiscal */ .pr-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(32px,5vw,64px);align-items:start} .pr-split .sl-lead{color:var(--text-2);margin-top:20px;max-width:520px} .pr-note{margin-top:28px;border-left:3px solid var(--p-accent-light);padding:4px 0 4px 18px;font:500 15px/1.65 var(--f-body);color:var(--text-2);max-width:520px} .pr-note b{color:var(--text)} .pr-note a{text-decoration:underline;text-underline-offset:3px} .pr-docs{border-top:1px solid var(--line)} .pr-doc{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline} .pr-doc b{font:700 15px var(--f-mono);color:var(--p-accent-light)} .pr-doc span{font:400 15px/1.55 var(--f-body);color:var(--text-2)} .pr-doc em{font-style:normal;font:600 11px var(--f-body);color:var(--ink);background:var(--p-accent-light);padding:2px 8px;border-radius:999px;margin-left:6px;white-space:nowrap} @media (max-width:480px){.pr-doc{grid-template-columns:1fr;gap:4px}} /* Troca de sistema (sequência real) */ .pr-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;counter-reset:pr-step} .pr-step{counter-increment:pr-step;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px;display:flex;flex-direction:column;gap:10px} .pr-step::before{content:counter(pr-step);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 16px var(--f-head);color:var(--ink);background:var(--p-accent-light);margin-bottom:6px} .pr-step b{font:700 19px/1.25 var(--f-head);letter-spacing:-.02em;color:var(--text)} .pr-step span{font:400 14.5px/1.6 var(--f-body);color:var(--muted)} /* Perguntas frequentes */ .pr-faq{display:flex;flex-direction:column;border-top:2px solid var(--text-dark);max-width:900px} .pr-faq details{border-bottom:1px solid rgba(6,13,8,.12)} .pr-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font:700 clamp(17px,1.6vw,20px)/1.35 var(--f-head);letter-spacing:-.02em;color:var(--text-dark)} .pr-faq summary::-webkit-details-marker{display:none} .pr-faq summary::after{content:"+";flex-shrink:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 20px var(--f-body);background:rgba(6,13,8,.06);transition:transform .2s} .pr-faq details[open] summary::after{transform:rotate(45deg);background:var(--p-accent);color:var(--white)} .pr-faq summary:focus-visible{outline:2px solid var(--green-dark);outline-offset:4px;border-radius:6px} .pr-faq p{font:400 16px/1.7 var(--f-body);color:var(--text-dark-2);padding:0 48px 24px 0;max-width:72ch} .pr-faq a{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}