.menu summary{min-width:5rem;text-align:center;transition:transform .2s var(--ease-out);-webkit-tap-highlight-color:transparent}
.menu summary:active{transform:scale(.92)}
.menu[open] summary{font-size:0;position:relative;z-index:3}
.menu[open] summary::after{content:'\00d7';display:block;font-size:2rem;line-height:1;animation:menu-x .45s var(--ease-out) both}
@keyframes menu-x{from{transform:rotate(-90deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
/* v3: the menu circle grows with transform only (runs on the GPU, no clip-path repaint). Brand, WhatsApp and the menu button stay above it. */
.nav .brand,.nav__wa{position:relative;z-index:3}
.menu[open] .menu__panel{z-index:1;background:transparent}
.menu[open] .menu__panel::before{--md:calc((100vw + 100vh)*1.5);content:'';position:fixed;z-index:-1;width:var(--md);height:var(--md);top:calc(var(--md)/-2);left:calc(100% - 44px - var(--md)/2);border-radius:50%;background:var(--paper);will-change:transform;animation:menu-disc .6s var(--ease-out) both}
@keyframes menu-disc{from{transform:scale(0)}to{transform:scale(1)}}
.menu[open] .menu__panel>*{animation:menu-up .5s var(--ease-out) both;will-change:transform,opacity}
.menu[open] .menu__panel>*:nth-child(1){animation-delay:.1s}
.menu[open] .menu__panel>*:nth-child(2){animation-delay:.15s}
.menu[open] .menu__panel>*:nth-child(3){animation-delay:.2s}
.menu[open] .menu__panel>*:nth-child(4){animation-delay:.25s}
.menu[open] .menu__panel>*:nth-child(5){animation-delay:.29s}
@keyframes menu-up{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
/* closing: menu.js adds .closing, plays this, then removes the open attribute */
.menu[open].closing summary::after{animation:menu-x-out .28s cubic-bezier(.4,0,1,1) both}
@keyframes menu-x-out{from{transform:none;opacity:1}to{transform:rotate(90deg) scale(.4);opacity:0}}
.menu[open].closing .menu__panel::before{animation:menu-disc-out .4s var(--ease-io) both}
@keyframes menu-disc-out{from{transform:scale(1)}to{transform:scale(0)}}
.menu[open].closing .menu__panel>*:nth-child(n){animation:menu-down .2s ease-in both;animation-delay:0s}
@keyframes menu-down{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,10px,0)}}
.menu__panel a:active{color:var(--green-deep)}
#pedido,#personalizar{scroll-margin-top:72px}
/* home service cards: text and demo centred horizontally, vertical positions unchanged */
.services a{text-align:center}
.services .demo:not(.demo--full){justify-content:center;margin-left:auto;margin-right:auto}