/* ==========================================================================
   responsive.css · Ajustes para telas menores e menos animação
   ========================================================================== */
/* responsivo */
@media (max-width:1180px){.ro.r1{left:0}.ro.r2{right:0}.ro.r4{right:0}}
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brew{grid-template-columns:minmax(0,1fr)}
  .roast{grid-template-columns:minmax(0,1fr)}
  .side{flex-direction:row}
  .beanbox{flex:1 1 50%}
  .reads{flex:1 1 50%;align-content:stretch}
  .ft-g{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-g>div:first-child{grid-column:1/-1}
}
@media (max-width:980px){
  .hero{padding:16px 0 70px}
  .hero .wrap{grid-template-columns:minmax(0,1fr);text-align:center;gap:10px}
  .hero-t{display:flex;flex-direction:column;align-items:center}
  .coord{justify-content:center}
  .hero .lead{margin-inline:auto}
  .ctas{justify-content:center}
  .spec{margin-inline:auto;width:100%;text-align:center}
  .spec div,.spec div+div{padding:16px 10px 0}
  .inst{width:min(100%,520px);margin-top:16px}
  .sh{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;margin-bottom:40px}
  .sh p{justify-self:center}
  .proto{grid-template-columns:minmax(0,1fr);gap:40px}
  .reel{position:relative;top:auto;order:-1;width:min(100%,300px)}
  .sens .wrap{grid-template-columns:minmax(0,1fr);gap:50px;text-align:center}
  .sens .lead{margin-inline:auto}
  .feat{text-align:left}
  .th{grid-template-columns:minmax(0,1fr);gap:40px}
  .th-ph{max-width:460px;justify-self:center;width:100%}
  .th-t{text-align:center}
  .th .lead{margin-inline:auto}
  .log{text-align:left;max-width:560px;margin-inline:auto}
  .vis{grid-template-columns:minmax(0,1fr)}
  .vis-t{text-align:center;align-items:center}
  .vis .lead{margin-inline:auto}
  .hrs,.ct{width:100%;text-align:left}
  .map{min-height:340px}
  .sec{padding-block:90px}
  .shop-top{justify-content:center;text-align:center}
}
@media (max-width:760px){
  .wrap{padding-inline:20px}
  .ro{position:relative;inset:auto!important;min-width:0}
  .ro::after{display:none}
  .inst{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .inst svg.dial{position:relative;grid-column:1/-1;width:min(100%,400px);height:auto;aspect-ratio:1;justify-self:center;margin-bottom:6px}
  .ro b{font-size:19px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .meth{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .meth button{padding:12px 2px 10px;font-size:10px}
  .meth button svg{width:28px;height:28px}
  .panel{padding:20px}
  .rec{grid-template-columns:minmax(0,1fr);gap:20px}
  .cyl svg{max-height:230px;width:auto}
  .rec-h{flex-direction:column;align-items:center;text-align:center}
  .side{flex-direction:column}
  .chart{padding:16px 12px 10px}
  .chart-f{justify-content:center;text-align:center}
  .pr-i>button{grid-template-columns:minmax(0,1fr) 40px;gap:12px;padding:22px 0}
  .pr-i .c{grid-column:1/-1}
  .pr-d .in{padding:0 0 24px}
  .pr-d ul{grid-template-columns:minmax(0,1fr)}
  .pr-d .btn{justify-self:stretch}
  .feat{grid-template-columns:minmax(0,1fr)}
  .phone{width:min(340px,100%)}
  .scr{height:640px}
  .hrs dl{grid-template-columns:repeat(7,minmax(0,1fr))}
  .hrs dl div{padding:12px 2px}
  .hrs dt{font-size:10px;letter-spacing:.04em}
  .hrs dd{font-size:9.5px}
  .ct a,.ct div{flex-direction:column;align-items:center;text-align:center;gap:6px}
  .ct b{text-align:center}
  .ft-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);text-align:center}
  .ft-g>div:first-child{display:flex;flex-direction:column;align-items:center}
  .ft p{margin-inline:auto}
  .ft-b{justify-content:center;text-align:center}
  .quote{text-align:center}
  .scr{height:auto}
  .app-b{overflow:visible}
  .th-ph img{aspect-ratio:1;object-position:42% 58%}
  .beanbox svg{width:min(130px,42%)}
  .reel{width:min(100%,270px)}
  .ft .big{text-align:center;font-size:24vw}
}
@media (max-width:520px){
  .wrap{padding-inline:16px}
  .hero h1{font-size:clamp(46px,14vw,64px)}
  .ctas .btn{flex:1 1 100%}
  .tabs button{padding:9px 11px;letter-spacing:.04em;font-size:11px}
  .spec b{font-size:21px}
  .spec span{font-size:9.5px}
  .sh h2{font-size:clamp(36px,10.5vw,52px)}
  .lot-h h3{font-size:24px}
  .score b{font-size:30px}
  .rows b{font-size:16px}
  .rows div{padding:12px 10px}
  .dose-h b{font-size:34px}
  .radar{grid-template-columns:130px minmax(0,1fr)}
  .radar svg{width:130px;height:130px}
  .att label{grid-template-columns:80px minmax(0,1fr) 34px}
  .log li{grid-template-columns:minmax(0,1fr);gap:4px;padding-left:22px}
  .quote{padding:22px 20px}
  .bag{width:100%}
  .reads b{font-size:19px}
  .timer{justify-content:center}
  .ft-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){.hrs dd.off{font-size:0}.hrs dd.off::after{content:"—";font-size:11px}}
@media (max-width:360px){
  .meth button span{font-size:9px}
  .phone{padding:8px;border-radius:40px}
  .scr{border-radius:32px}
  .radar{grid-template-columns:minmax(0,1fr);justify-items:center}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}