/* ===== Pagina Automacao no celular (so telas de ate 720 px; o computador nao usa este arquivo) =====
   A moldura da demonstracao deixa de ter proporcao fixa: acompanha a altura que a propria demonstracao informa. */
.demo{padding:10px 10px 12px;border-radius:20px}
.demo-bar{padding:2px 4px 10px;gap:8px}
.demo-frame{aspect-ratio:auto;height:auto;border-radius:14px}
.demo-frame iframe{position:static;display:block;width:100%;height:560px;min-height:0}

/* ===== restante da pagina: mesma escala e espacos das paginas de servico no celular ===== */
.phero{padding-top:92px;padding-bottom:6px}
.phero .wrap{gap:18px}
.phero h1{font-size:1.9rem;line-height:1.1;margin:14px 0 10px}
.phero .tag{font-size:1.02rem;margin-bottom:8px}
.phero .lede{font-size:1rem}
.phero .ctas{margin-top:16px;gap:10px}
.phero .ctas .btn,.pcta .btn{min-height:46px;padding:12px 20px}
.crumbs{font-size:.7rem;gap:8px}
.sec{padding-top:30px;padding-bottom:30px}
#demo{padding-top:10px}
.sec h2{font-size:26px;line-height:1.2}
.kicker{font-size:13px;letter-spacing:.2em;margin:0 0 12px}
.sh{margin-bottom:14px}
.sh .kicker{margin-bottom:10px}
.sh p:not(.kicker){margin-top:8px}
.demo-note{margin-top:10px}

/* ---- Um pedido, cinco etapas: lista vertical com icone a esquerda e linha dourada fina ---- */
.flow{display:block;gap:0;margin-top:0}
.flow::before,.flow::after{display:none}
.fs{display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:start;text-align:left;padding:0 0 14px}
.fs:last-child{padding-bottom:0}
.fs .bub{grid-row:1 / span 2;width:36px;height:36px;margin:0}
.fs:hover .bub{transform:none;background:var(--panel)}
.fs .bub svg{width:18px;height:18px}
.fs h3{font-size:1.05rem;margin:0 0 2px;padding-top:6px}
.fs p{font-size:.93rem;line-height:1.5;margin:0}
.fs::before{content:"";position:absolute;left:17.5px;top:36px;bottom:0;width:1px;background:linear-gradient(180deg,var(--accent),rgba(127,180,255,.45));transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.fs.in::before{transform:scaleY(1)}
.fs:last-child::before{display:none}
.fs.rv{transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--d,0s)*.6)}
.fs.rv.in{transform:none}

/* ---- Possibilidades: cartoes compactos, sem repetir o rotulo ---- */
.poss{gap:10px}
.poss .card{display:grid;grid-template-columns:32px 1fr;column-gap:12px;align-items:start;padding:14px 16px}
.poss .card:hover{transform:none;box-shadow:none}
.poss .nic{grid-row:1 / span 2;width:28px;height:28px;margin-top:1px}
.poss .nic *{stroke-dashoffset:0;transition:none}
.poss h3{font-size:1.05rem;margin:0 0 3px}
.poss p{font-size:.93rem;line-height:1.5}
.poss .tagp{display:none}
.warn{display:block;margin-top:14px;padding:14px 16px;font-size:.95rem}
.warn b{display:block;margin-bottom:4px}

/* ---- Chamada final ---- */
.pcta{padding:22px 18px;gap:14px;border-radius:20px}
.pcta h2{font-size:1.45rem;line-height:1.2}
.pcta p{margin-top:8px;font-size:.97rem}
.pcta .ctas{gap:10px}
#orcamento,main > section:last-of-type{padding-bottom:26px}

@media (prefers-reduced-motion:reduce){
  .fs.rv,.fs::before{transition:none}
  .fs::before{transform:scaleY(1)}
  .fs.rv{transform:none}
}