/* PROPOSTA — celular v2 (rodada 14 · E3). Só vale abaixo de 800 px. Não está no site publicado. */
.m-only{display:none}
@media(max-width:800px){
.m-only{display:block}.d-only{display:none!important}
/* escala de tipos do celular: 7 tamanhos */
body{font-size:16px}
.sub,p.sub,.lead,.hero .lead{font-size:16px;line-height:1.5}
h2,.shead h2,.split h2{font-size:28px;line-height:1;margin:10px 0 12px}
.h3big{font-size:24px}
section{padding:40px var(--gut)}
/* cabeçalho mais baixo */
header{padding:8px var(--gut)}.logo img{height:34px}.mbtn{padding:9px 12px;font-size:14px}
/* topo: título, frase, vídeo — sem botões (o cliente primeiro conhece) */
.hero{padding:16px var(--gut) 28px}
.hero .eyebrow{order:1;font:700 10.5px/1 var(--f-mono)!important;letter-spacing:0!important;padding:6px 7px!important;white-space:nowrap}
.hero h1{order:2;font-size:34px;line-height:.96;margin:10px 0 8px}
.hero h1 .l{display:inline;white-space:normal}.hero h1 .l:after{content:" "}
.hero .rot{order:3;font-size:16px;margin:0 0 6px;min-height:0}
.hero .lead{order:4;font-size:15px;margin:0 0 14px;color:var(--mute)}
.hero .ctas{display:none!important}
.hero .vwrap{order:6;aspect-ratio:16/10}
/* números 2 × 2 */
.nums{grid-template-columns:1fr 1fr!important}.nums div{padding:12px var(--gut)!important;font-size:12.5px}.nums b{font-size:18px}
.nums div:nth-child(4){display:none}.nums div:last-child{grid-column:auto}
/* problema / porta de entrada */
.three.quotes>div{margin-top:10px}.three.quotes b{font-size:17px}
.steps li{padding:10px 0}.steps span{font-size:14px}
/* produtos: grade 2 colunas, sem deslizar, 6 + 4 visíveis */
.prods{display:grid!important;grid-template-columns:1fr 1fr!important;grid-auto-flow:row!important;overflow:visible!important;margin-right:0!important;padding-right:0!important;gap:10px!important}
.prods:after{display:none}
.prod .photo.pi{aspect-ratio:4/3}.prod .in{padding:9px 10px}.prod h3{font-size:14px;line-height:1.2}
#produtos .prod.inhero,#produtos .pgh+.prods .prod:nth-child(n+5){display:none}
#produtos.all .prod{display:flex!important}
.pmore{display:block;width:100%;margin:14px 0 0;background:none;border:1px solid #ffffff33;color:var(--fg);font:600 15px/1 var(--f-display);padding:15px;border-radius:2px}
/* aplicações */
.cards .card p{font-size:13.5px}.cards .card h3{font-size:15px}
/* protótipo: imagem menor */
.split>.photo.big{aspect-ratio:16/10}
/* como funciona: só os 3 desenhos */
.flow figcaption{font-size:13px}.proc,.fx,.sublbl{display:none!important}
/* linha 360°: grade 2 colunas, sem deslizar */
.mgrid{display:grid!important;grid-template-columns:1fr 1fr!important;grid-auto-flow:row!important;overflow:visible!important;margin-right:0!important;padding-right:0!important}
.mgrid:after{display:none}.mach p,.mach .spec{display:none}.mach .in{padding:9px 10px}.mach h3{font-size:16px}
.swipe{display:none!important}
/* automação: só o cartão principal */
.auto-i{display:none}
/* setores: 4 visíveis */
.sectors .sector:nth-child(n+5){display:none}#setores.all .sector:nth-child(n+5):not(.more),#setores.all .sector.more{display:flex!important}
.sector p{display:none}.sector h3{font-size:15px}
/* fabricante: 6 números em 2 colunas */
.facts{grid-template-columns:1fr 1fr}.facts span{font-size:13px}
/* formulário: 4 campos */
form label:nth-of-type(3),form label:nth-of-type(4),form label:nth-of-type(6),form label:nth-of-type(8){display:none}
form label:nth-of-type(5){grid-column:1/-1}
/* fechamento: um botão só */
.closing .ghost{display:none}
/* rodapé em sanfona */
/* WhatsApp: botão pequeno, só aparece quando o visitante rola para cima; some no topo, no formulário e no rodapé */
.mbar{display:none!important}
.wa{right:16px;bottom:16px;width:48px;height:48px;padding:0!important;justify-content:center;opacity:0;transform:translateY(16px);pointer-events:none}
.wa.on{opacity:0;transform:translateY(16px);pointer-events:none}
.wa.up{opacity:1;transform:none;pointer-events:auto}.wa svg{width:24px;height:24px}

/* ===== SISTEMA DE ESPAÇAMENTO DO CELULAR (só 8, 16, 24 e 40 px) =====
   vão entre seções: 40 + 40 = 80 px, sempre igual
   rótulo → título 8 · título → texto 16 · texto → conteúdo 24 · bloco interno → bloco interno 40 (com linha) */
section{padding:40px var(--gut)!important}
.hero{padding:16px var(--gut) 40px!important}
section .wrap *{margin-top:0;margin-bottom:0}
section .wrap>*+*,.shead>*+*,.split>*+*,.split>div>*+*,.shead>div>*+*,.shr>*+*,.auto-h>*+*,.vdp>div>*+*,.vdp>*+*{margin-top:24px}
.eyebrow+h2,.eyebrow+.h3big{margin-top:8px!important}
h2+.sub,h2+p,.h3big+.sub,h2+.shr,.sub+.sub{margin-top:16px!important}
.shead{gap:0!important}
.shead+.pgh,#produtos .shead>.pgh{margin-top:24px!important}.pgh+.prods{margin-top:16px!important}
.three.quotes>*+*{margin-top:16px!important}
.vdp,.auto{margin-top:40px!important;padding-top:40px!important;border-top:1px solid var(--line)!important}
.card .in h3+p,.auto-main .in h3+p{margin-top:4px!important}.auto-main .role+h3{margin-top:4px!important}
details p{margin-top:8px!important}
.pmore,.morebtn{margin-top:24px!important}.note{margin-top:16px!important}
.check li+li{margin-top:0}
form small{margin-top:0!important}
.closing h2{margin-top:8px!important}.closing .ctas{margin-top:24px!important}
.split>.photo+div{margin-top:0!important}.split>.photo{margin-top:24px!important}
.facts>*,.sup>*,.feat>*,.three>*:first-child{margin-top:0!important}details+details{margin-top:0!important}
p.m-only{display:block!important}

/* ===== RODADA 15 ===== */
/* E11: vão entre seções 56 px (28 + 28), igual em todas */
section{padding:28px var(--gut)!important}
/* E12/E14: topo = chamada + 6 produtos + vídeo da máquina */
.hero.hx{display:block!important;padding:20px var(--gut) 28px!important}
.hx h1{font-size:38px;line-height:.98;margin:10px 0 0!important}
.hx .lead{display:block!important;font-size:16px;color:var(--mute);margin:12px 0 0!important}
.mos{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:20px!important}
.mos figcaption{font-size:11px;padding:16px 6px 5px}
.hx .hxv{margin-top:16px!important;aspect-ratio:1/1}.hx .hxv video{object-position:50% 45%}
/* E13: Na indústria logo abaixo, sem repetir os produtos do topo */
/* cartão "Garrafa térmica de café" igual aos outros */
.prod.feat .in{padding:9px 10px!important}.prod.feat h3{font-size:14px!important}.prod.feat .photo.pi{aspect-ratio:4/3!important}
/* E10: lista 01/02/03 compacta */
.steps li{grid-template-columns:30px 1fr!important;gap:6px!important;padding:12px 0!important}
.steps li:before{font-size:13px;line-height:1.35}
.steps b{display:inline!important;font-size:16px;margin:0!important}.steps b:after{content:" · ";color:var(--mute);font-weight:400}
.steps span{display:inline!important;font-size:14px;line-height:1.35!important}
.steps li>div{line-height:1.35}
}

/* topo novo (rodada 15) também no computador */
.mos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mos figure{margin:0;position:relative;aspect-ratio:1;overflow:hidden;border-radius:4px;background:#111}
.mos img{width:100%;height:100%;object-fit:cover;display:block}
.mos figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font:600 13px/1.1 var(--f-display);color:#fff;background:linear-gradient(transparent,#000c)}
.vwrap .tag{max-width:calc(100% - 24px)}
@media(min-width:801px){.hero.hx{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"t v" "m v";row-gap:28px;align-items:start}
.hx .hx-t{grid-area:t}.hx .mos{grid-area:m}.hx .hxv{grid-area:v;align-self:stretch;aspect-ratio:auto;min-height:100%}.hx .hxv video{height:100%;object-fit:cover}}
.hx h1 .l{white-space:normal!important;text-wrap:balance}@media(min-width:801px){.hx h1{font-size:clamp(44px,4.4vw,64px)}}

@media(max-width:800px){
/* E20: passos lado a lado */
.steps{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;border:0}
.steps li{display:block!important;position:relative;padding:14px 10px!important;border:1px solid var(--line)!important;border-radius:4px;background:var(--panel)}
.steps li:last-child{border-bottom:1px solid var(--line)!important}
.steps li:before{display:block;font:700 22px/1 var(--f-display)!important;color:var(--red);margin-bottom:8px}
.steps li:not(:last-child):after{content:"›";position:absolute;right:-8px;top:12px;color:var(--uvt);font-size:20px;z-index:1}
.steps b{display:block!important;font-size:15px}.steps b:after{content:none!important}
.steps span.m-only{display:block!important;font-size:12.5px;line-height:1.3!important;margin-top:4px;color:var(--mute)}
/* E17: rodapé */
}
@media(min-width:801px){.si{display:none}}
@media(max-width:800px){.steps span.d-only{display:none!important}}
@media(max-width:800px){.flow{align-items:stretch!important}.flow figure{display:flex;flex-direction:column}.flow figcaption{flex:1;align-items:flex-start}}
/* rodada 17 · E24: linha vermelha no vídeo do topo */
.hx .hxv{box-shadow:0 0 0 1.5px var(--red),0 20px 50px #0008!important}
@media(max-width:800px){
/* E21–E23: rodapé — sanfonas, assinatura com contatos, legal */
}
/* rodada 18 · E25: links do rodapé em grade no celular (sem sanfonas) */
@media(max-width:800px){
}
/* rodada 21 · E30: botão para a página de vídeos */
.vbtn{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:12px 18px 12px 12px;border:1px solid #ffffff33;border-radius:40px;color:var(--fg);text-decoration:none;font:600 15px/1 var(--f-display)}
.vbtn span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-size:11px}
.vbtn:hover{border-color:#fff8}
@media(min-width:801px){.hx .vbtn{grid-area:b;justify-self:start;margin-top:0}.hero.hx{grid-template-areas:"t v" "m v" "m b"}}
@media(max-width:800px){.hx .vbtn{display:flex;justify-content:center;margin-top:12px}
/* E31: WhatsApp sempre visível, redondo */
.wa,.wa.on{opacity:1!important;transform:none!important;pointer-events:auto!important}}
@media(max-width:800px){.wa.foot{opacity:0!important;transform:translateY(16px)!important;pointer-events:none!important}}