/* ==========================================================================
   sensory.css · Caderno do Thiago (celular de demonstração)
   ========================================================================== */
/* sensorial */
.sens{background:var(--roast);color:var(--cream);overflow:hidden}
.sens::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 25% 50%,rgba(217,162,115,.16),transparent 70%);pointer-events:none}
.sens .wrap{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:center}
.sens h2{font-size:clamp(40px,5vw,76px);margin-top:20px;letter-spacing:-.05em}
.sens .lead{margin-top:22px;font-size:17.5px;color:rgba(244,228,212,.76);max-width:46ch}
.sub-d{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:10px 14px;border-radius:12px;border:1px dashed var(--dline2);font:500 12.5px/1 var(--mono);color:var(--crema)}
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
.feat div{padding:16px;border-radius:14px;border:1px solid var(--dline);background:rgba(244,228,212,.03)}
.feat b{display:block;font:650 16px/1.25 var(--disp)}
.feat span{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:rgba(244,228,212,.62)}
.phone{text-align:left;justify-self:center;width:340px;max-width:100%;border-radius:46px;padding:11px;background:#0D0B09;box-shadow:0 0 0 1px rgba(244,228,212,.12),0 60px 120px -40px rgba(0,0,0,.9)}
.scr{position:relative;border-radius:36px;overflow:hidden;background:var(--paper);color:var(--ink);height:700px;display:flex;flex-direction:column}
.app-h{padding:18px 20px 12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.app-h b{font:700 16px/1 var(--disp);letter-spacing:-.02em}
.app-h small{display:block;margin-top:5px;font:500 9.5px/1 var(--mono);letter-spacing:.08em;color:var(--mut)}
.app-h svg{width:28px;height:30px}
.app-b{flex:1;overflow:auto;padding:14px 18px 18px;overscroll-behavior:contain;scrollbar-width:thin}
.lote{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:var(--cream);font:500 10.5px/1.45 var(--mono);color:var(--ink2)}
.lote b{display:block;font:650 14px/1.2 var(--disp);color:var(--ink)}
.radar{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;align-items:center;margin-top:10px}
.radar svg{width:150px;height:150px;overflow:visible}
.radar svg text{font:500 7.5px var(--mono);fill:var(--mut);letter-spacing:.04em}
.tot2{text-align:center}
.tot2 b{display:block;font:500 40px/1 var(--mono);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.tot2 small{display:block;margin-top:6px;font:500 9px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brown)}
.att{display:grid;gap:2px;margin-top:6px}
.att label{display:grid;grid-template-columns:86px minmax(0,1fr) 38px;gap:8px;align-items:center;font:500 10.5px/1 var(--mono);color:var(--ink2)}
.att label output{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.att input[type=range]{margin:0;height:26px}
.att input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px;border-width:3px}
.tg{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tg button{border:1px solid var(--line2);background:transparent;border-radius:999px;padding:7px 10px;cursor:pointer;font:500 10.5px/1 var(--mono);color:var(--ink2)}
.tg button[aria-pressed="true"]{background:var(--brown);border-color:var(--brown);color:var(--paper)}
.save{width:100%;margin-top:14px;height:48px;border-radius:14px;border:0;background:var(--ink);color:var(--paper);font:600 14.5px/1 var(--disp);cursor:pointer}
.hist{margin-top:14px;display:grid;gap:8px}
.hist .h{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:4px}
.hist div.e{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);font:500 10.5px/1.35 var(--mono);color:var(--mut)}
.hist div.e b{display:block;font:650 13px/1.2 var(--disp);color:var(--ink)}
.hist div.e em{font:500 16px/1 var(--mono);font-style:normal;color:var(--brown)}
.hist div.e.new{animation:in .6s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(-8px)}}
.app-t{position:absolute;left:50%;top:70px;transform:translate(-50%,-10px);opacity:0;padding:10px 14px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 11px/1 var(--mono);white-space:nowrap;transition:opacity .3s,transform .3s;pointer-events:none}
.app-t.on{opacity:1;transform:translate(-50%,0)}