/* ==========================================================================
   roast.css · Laboratório: curva de torra
   ========================================================================== */
/* torra */
.roast{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,.85fr);gap:22px}
.chart{position:relative;border:1px solid var(--dline);border-radius:var(--r);background:var(--dark2);padding:22px 22px 14px;min-width:0}
.chart-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,228,212,.6);margin-bottom:12px}
.chart-h span{display:inline-flex;align-items:center;gap:8px}
.chart-h i{width:18px;height:2px;background:var(--cream)}
.chart-h i.ror{background:repeating-linear-gradient(90deg,var(--crema) 0 4px,transparent 4px 7px)}
.chart svg{width:100%;height:auto;touch-action:pan-y;cursor:ew-resize;user-select:none}
.chart svg text{font-family:var(--mono);font-size:11px;fill:rgba(244,228,212,.5)}
.chart .ph text{font-size:10.5px;letter-spacing:.12em;fill:rgba(244,228,212,.62)}
.chart-f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.chart-f small{font:400 11px/1.4 var(--mono);color:rgba(244,228,212,.5)}
.play{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--dline2);background:transparent;color:var(--cream);cursor:pointer;font:500 12px/1 var(--mono);letter-spacing:.06em}
.play svg{width:14px;height:14px}
.side{display:flex;flex-direction:column;gap:16px;min-width:0}
.beanbox{position:relative;border:1px solid var(--dline);border-radius:var(--r);background:radial-gradient(circle at 50% 42%,rgba(217,162,115,.14),transparent 62%),var(--dark2);padding:22px;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.beanbox svg{width:min(180px,60%);height:auto;transition:transform .2s}
.beanbox .ph-n{margin-top:10px;font:700 26px/1 var(--disp);letter-spacing:-.03em}
.beanbox p{margin-top:10px;font-size:14.5px;line-height:1.5;color:rgba(244,228,212,.72);max-width:34ch}
.crack{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%) scale(.6);font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--crema);opacity:0;pointer-events:none}
.crack.on{animation:pop 1.4s ease-out}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-160%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}
.reads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--dline);border-radius:14px;overflow:hidden;background:var(--dline)}
.reads div{background:var(--dark2);padding:13px 14px}
.reads small{display:block;font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,228,212,.5)}
.reads b{display:block;margin-top:8px;font:500 22px/1 var(--mono);letter-spacing:-.03em;color:var(--cream);font-variant-numeric:tabular-nums}