/* Fonte exclusiva da página pública. Carregamento direto, sem depender de bundle gerado. */
.vendas{
    --forest:#126344;
    --ink:#173e32;
    --muted:#61746d;
    --mint:#e9f5ee;
    --lime:#d9ef9f;
    --line:#dce7df;
    margin:0;
    background:#fbfdfb;
    color:var(--ink);
    font-family:"Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing:antialiased}

.vendas *{
    box-sizing:border-box}
.vendas a{
    color:inherit;
    text-decoration:none}
.vendas button,.vendas a,.vendas summary{
    -webkit-tap-highlight-color:transparent}
.vendas a:focus-visible,.vendas summary:focus-visible{
    outline:3px solid #ba6b20;
    outline-offset:5px}
.vendas .container{
    width:min(1180px,calc(100% - 64px));
    margin-inline:auto}
.vendas .skip-link{
    position:fixed;
    top:-100px;
    left:20px;
    background:#fff;
    padding:15px;
    z-index:50}
.vendas .skip-link:focus{
    top:10px}
.vendas .site-header{
    border-bottom:1px solid var(--line);
    background:#fbfdfb}
.vendas .nav{
    min-height:94px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px}
.vendas .brand img{
    display:block;
    object-fit:contain}
.vendas nav,.vendas .nav-actions{
    display:flex;
    align-items:center;
    gap:30px}
.vendas nav a,.vendas .login{
    font-size:14px;
    font-weight:600}
.vendas nav a:hover,.vendas .text-link:hover{
    text-decoration:underline;
    text-underline-offset:5px}
.vendas .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:32px;
    background:var(--forest);
    color:#fff;
    min-height:56px;
    padding:16px 24px;
    border-radius:9px;
    font-size:15px;
    font-weight:700;
    box-shadow:0 5px 0 #0a442f;
    transition:transform .2s,background .2s}
.vendas .button:hover{
    background:#0c5037;
    transform:translateY(-2px)}
.vendas .button span{
    font-size:23px;
    line-height:1}
.vendas .button.small{
    min-height:44px;
    padding:11px 18px;
    gap:20px;
    font-size:13px;
    box-shadow:none}
.vendas .hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    min-height:680px;
    align-items:center;
    padding-block:65px 72px}
.vendas .eyebrow{
    font-size:11px;
    font-weight:800;
    letter-spacing:1.7px;
    line-height:1.7}
.vendas .live-dot{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--forest);
    margin-right:7px}
.vendas h1,.vendas h2,.vendas h3,.vendas p{
    margin-top:0}
.vendas h1{
    font-family:"Trebuchet MS","Segoe UI",sans-serif;
    font-size:clamp(43px,4.4vw,61px);
    letter-spacing:-2.7px;
    line-height:1.08;
    margin-bottom:24px;
    font-weight:700}
.vendas em{
    font-style:normal;
    color:var(--forest)}
.vendas .lead{
    font-size:17px;
    line-height:1.8;
    color:var(--muted);
    max-width:465px;
    margin-bottom:30px}
.vendas .text-link{
    font-size:13px;
    font-weight:700;
    display:inline-flex;
    gap:12px;
    align-items:center}
.vendas .hero .text-link{
    margin-left:18px}
.vendas .hero-note{
    color:var(--muted);
    font-size:12px;
    margin-top:22px}
.vendas .product-scene{
    position:relative;
    height:530px;
    background:var(--mint);
    border-radius:48% 48% 22px 22px}
.vendas .scene-caption{
    position:absolute;
    top:24px;
    left:35px;
    display:flex;
    gap:22px;
    align-items:center;
    font-size:10px;
    letter-spacing:1.7px;
    font-weight:800;
    transform:rotate(-5deg)}
.vendas .scene-caption span:last-child{
    font-size:40px}
.vendas .order-board{
    position:absolute;
    right:-7px;
    top:115px;
    width:370px;
    padding:19px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 20px 50px #173e3214;
    transform:rotate(3deg)}
.vendas .board-title{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    padding-bottom:17px;
    border-bottom:1px solid var(--line)}
.vendas .mini-mark{
    background:var(--forest);
    color:white;
    padding:3px 8px;
    border-radius:5px;
    font-size:17px}
.vendas .board-online{
    margin-left:auto;
    font-size:9px;
    color:var(--forest)}
.vendas .board-heading{
    display:flex;
    justify-content:space-between;
    margin:19px 0;
    font-size:12px}
.vendas .board-heading>span{
    font-size:9px;
    color:var(--muted)}
.vendas .order-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px}
.vendas .column-label{
    display:flex;
    justify-content:space-between;
    font-size:8px;
    letter-spacing:.6px;
    margin-bottom:10px}
.vendas .order-card{
    border:1px solid var(--line);
    padding:12px 9px;
    border-radius:7px}
.vendas .order-card small{
    display:block;
    font-size:7px;
    color:var(--muted);
    margin-bottom:9px}
.vendas .order-card strong{
    font-size:10px}
.vendas .order-card p{
    font-size:9px;
    line-height:1.8;
    margin:9px 0}
.vendas .status{
    display:inline-block;
    padding:4px 7px;
    border-radius:4px;
    font-size:8px}
.vendas .received{
    background:#e5f3ea;
    color:#126344}
.vendas .cooking{
    background:#fff1d9;
    color:#77531b}
.vendas .board-bottom{
    font-size:8px;
    margin-top:18px;
    display:flex;
    justify-content:space-between}
.vendas .phone{
    width:223px;
    background:#fff;
    border:6px solid #173e32;
    border-radius:31px;
    position:absolute;
    top:68px;
    left:0;
    box-shadow:0 25px 40px #173e3230;
    transform:rotate(-7deg);
    overflow:hidden}
.vendas .phone-top{
    display:flex;
    justify-content:space-between;
    padding:9px 15px;
    font-size:8px}
.vendas .food-art{
    height:157px;
    background:#f1bb52;
    position:relative;
    overflow:hidden}
.vendas .food-label{
    display:block;
    font-size:7px;
    letter-spacing:2px;
    text-align:center;
    padding-top:14px;
    color:#56360f;
    font-weight:800}
.vendas .burger{
    position:absolute;
    left:42px;
    top:48px;
    width:132px;
    transform:rotate(-8deg);
    filter:drop-shadow(2px 10px 6px #89571240)}
.vendas .burger i{
    display:block;
    position:relative}
.vendas .bun.top{
    height:46px;
    border-radius:75px 75px 12px 12px;
    background:radial-gradient(ellipse at 30% 37%,#fff2c9 0 2px,transparent 3px),radial-gradient(ellipse at 65% 24%,#fff2c9 0 2px,transparent 3px),radial-gradient(ellipse at 77% 65%,#fff2c9 0 2px,transparent 3px),linear-gradient(#e8a642,#bf651f)}
.vendas .lettuce{
    height:12px;
    background:#49863a;
    border-radius:35%;
    width:144px;
    left:-6px;
    transform:rotate(2deg)}
.vendas .cheese{
    height:8px;
    background:#ffda54;
    transform:skew(-17deg);
    z-index:1}
.vendas .patty{
    height:20px;
    background:#633920;
    border-radius:8px;
    box-shadow:inset 0 4px #8d502d}
.vendas .bun.bottom{
    height:18px;
    background:#d78d32;
    border-radius:4px 4px 16px 16px}
.vendas .phone-content{
    padding:0 14px 15px}
.vendas .store-avatar{
    display:inline-block;
    margin-top:-17px;
    position:relative;
    background:#173e32;
    border:3px solid #fff;
    border-radius:12px;
    padding:8px;
    color:#fff;
    font-family:Georgia,serif;
    font-weight:700}
.vendas .store-open{
    float:right;
    font-size:8px;
    color:#126344;
    margin-top:12px}
.vendas .phone h2{
    font-size:18px;
    letter-spacing:-.5px;
    margin:10px 0 4px}
.vendas .phone p{
    font-size:9px;
    color:var(--muted);
    margin-bottom:15px}
.vendas .menu-tabs{
    display:flex;
    gap:15px;
    font-size:8px;
    border-bottom:1px solid var(--line);
    padding-bottom:10px}
.vendas .menu-tabs b{
    color:var(--forest)}
.vendas .menu-product{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 0}
.vendas .menu-product strong,.vendas .menu-product b{
    font-size:10px;
    display:block}
.vendas .menu-product small{
    font-size:7px;
    color:var(--muted);
    display:block;
    margin:6px 0 10px}
.vendas .menu-add{
    background:var(--mint);
    padding:2px 8px;
    border-radius:6px}
.vendas .mock-cart{
    display:flex;
    justify-content:space-between;
    padding:12px;
    background:var(--forest);
    color:white;
    border-radius:7px;
    font-size:9px}
.vendas .delivery-note{
    position:absolute;
    bottom:41px;
    right:2px;
    display:flex;
    gap:10px;
    padding:16px;
    background:#fff;
    box-shadow:0 10px 35px #173e321a;
    border:1px solid var(--line);
    border-radius:12px;
    transform:rotate(2deg)}
.vendas .check-icon{
    padding:7px 11px;
    border-radius:50%;
    background:var(--mint);
    color:var(--forest)}
.vendas .delivery-note strong{
    display:block;
    font-size:11px;
    margin-bottom:5px}
.vendas .delivery-note small{
    font-size:9px;
    color:var(--muted)}
.vendas .illustration-note{
    position:absolute;
    bottom:2px;
    right:16px;
    font-size:9px;
    color:var(--muted)}

.vendas .channels{
    border-block:1px solid var(--line);
    background:#f2f7f3}
.vendas .channels .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding-block:25px}
.vendas .channels p{
    font-size:12px;
    line-height:1.6;
    margin:0}
.vendas .channels .container>span{
    font-weight:600;
    font-size:14px}
.vendas .section{
    padding-block:95px}
.vendas .section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:60px;
    margin-bottom:40px}
.vendas h2{
    font-family:"Trebuchet MS","Segoe UI",sans-serif;
    font-size:42px;
    letter-spacing:-1.5px;
    line-height:1.15;
    margin-bottom:20px}
.vendas .section-heading h2{
    margin-bottom:0}
.vendas .section-heading>p{
    max-width:390px;
    font-size:15px;
    line-height:1.8;
    color:var(--muted);
    margin:0}
.vendas .feature-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr 1fr;
    gap:18px}
.vendas .feature{
    padding:28px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#fff}
.vendas .feature-main{
    grid-row:span 2;
    background:var(--mint);
    display:flex;
    align-items:flex-start;
    flex-direction:column}
.vendas .feature-icon{
    font-size:25px;
    display:block;
    margin-bottom:21px;
    color:var(--forest)}
.vendas h3{
    font-size:18px;
    letter-spacing:-.4px;
    margin-bottom:12px}
.vendas .feature p{
    font-size:14px;
    color:var(--muted);
    line-height:1.75;
    margin-bottom:0}
.vendas .feature-main h3{
    font-size:27px;
    line-height:1.2}
.vendas .feature-main .eyebrow{
    font-size:9px;
    color:var(--forest);
    margin-bottom:14px}
.vendas .feature-main .text-link{
    margin-top:25px}
.vendas .link-preview{
    border:1px solid #c9dbcf;
    background:#ffffff8c;
    border-radius:8px;
    padding:18px 13px;
    margin-top:auto;
    font-size:11px;
    width:100%}
.vendas .link-preview span{
    margin-right:9px}
.vendas .operations{
    background:var(--ink);
    color:#fff;
    padding-block:75px}
.vendas .operations-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center}
.vendas .operations .eyebrow{
    color:var(--lime)}
.vendas .operations h2{
    font-size:37px}
.vendas .operations p{
    color:#c4d8ce;
    font-size:14px;
    line-height:1.8;
    max-width:430px}
.vendas .button.light{
    background:var(--lime);
    color:var(--ink);
    box-shadow:none;
    margin-top:12px}
.vendas .operations-list article{
    display:flex;
    gap:22px;
    padding-block:20px;
    border-bottom:1px solid #ffffff24}
.vendas .operations-list article:first-child{
    padding-top:0}
.vendas .operations-list article:last-child{
    border-bottom:0;
    padding-bottom:0}
.vendas .operations-list article>span{
    font-size:25px;
    color:var(--lime);
    width:25px;
    flex-shrink:0}
.vendas .operations-list h3{
    font-size:17px;
    margin-bottom:5px}
.vendas .operations-list p{
    margin:0;
    font-size:13px}
.vendas .steps-section{
    text-align:center}
.vendas .steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:60px;
    margin-top:50px;
    text-align:left}
.vendas .steps article{
    border-top:1px solid var(--line);
    padding-top:25px}
.vendas .steps article>span{
    font-size:13px;
    color:var(--forest);
    background:var(--mint);
    border-radius:50%;
    padding:12px;
    display:inline-block;
    margin-bottom:24px;
    font-weight:700}
.vendas .steps p{
    font-size:14px;
    line-height:1.8;
    color:var(--muted)}
.vendas .faq-section{
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:70px;
    padding-block:20px 85px}
.vendas details{
    border-bottom:1px solid var(--line)}
.vendas summary{
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    padding:22px 25px 22px 0;
    position:relative;
    list-style:none}
.vendas summary::-webkit-details-marker{
    display:none}
.vendas summary:after{
    content:'+';
    position:absolute;
    right:0;
    font-size:20px;
    top:17px;
    color:var(--forest)}
.vendas details[open] summary:after{
    content:'−'}
.vendas details p{
    font-size:14px;
    line-height:1.8;
    color:var(--muted);
    padding-right:20px}
.vendas .final-cta{
    text-align:center;
    background:var(--mint);
    padding:65px 24px;
    border-radius:22px}
.vendas .final-cta h2{
    font-size:44px}
.vendas .final-cta>p:not(.eyebrow){
    color:var(--muted);
    font-size:15px;
    margin-bottom:28px}
.vendas .footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding-block:38px}
.vendas .footer p,.vendas .footer>a:last-child{
    font-size:12px;
    color:var(--muted);
    margin:0}
.vendas section[id]{
    scroll-margin-top:25px}

@media(min-width:1450px){
    .vendas .hero{
    min-height:730px}
}

@media(max-width:1050px){
    .vendas .container{
    width:calc(100% - 40px)}
.vendas nav{
    gap:18px}
.vendas .nav-actions{
    gap:18px}
.vendas .hero{
    gap:20px}
.vendas .hero .text-link{
    display:flex;
    margin:25px 0 0}
.vendas .order-board{
    width:305px;
    right:0}
.vendas .phone{
    width:207px;
    left:-7px}
.vendas .delivery-note{
    right:0;
    bottom:35px}
.vendas .feature{
    padding:22px}
.vendas .operations-inner{
    gap:45px}
.vendas h1{
    font-size:49px}
.vendas .channels .container>span{
    font-size:12px}
}

@media(max-width:760px){
    .vendas .container{
    width:calc(100% - 36px)}
.vendas .nav{
    min-height:78px;
    gap:10px;
    flex-wrap:wrap;
    padding-block:15px}
.vendas .brand img{
    width:140px;
    height:40px}
.vendas nav{
    order:3;
    width:100%;
    justify-content:center;
    gap:28px;
    padding-top:12px;
    border-top:1px solid var(--line)}
.vendas nav a{
    font-size:12px}
.vendas .nav-actions{
    gap:12px}
.vendas .nav-actions .small{
    font-size:11px;
    padding:10px 12px;
    gap:8px;
    min-height:40px}
.vendas .login{
    font-size:12px}
.vendas .hero{
    grid-template-columns:1fr;
    padding-block:44px;
    gap:28px}
.vendas h1{
    font-size:clamp(40px,8vw,57px);
    letter-spacing:-1.9px}
.vendas .hero .eyebrow{
    font-size:9px}
.vendas .lead{
    font-size:16px;
    max-width:550px}
.vendas .hero .text-link{
    display:inline-flex;
    margin-left:15px;
    font-size:12px}
.vendas .product-scene{
    width:100%;
    max-width:480px;
    margin:auto;
    height:500px}
.vendas .order-board{
    right:0;
    top:110px;
    width:310px}
.vendas .phone{
    left:12px;
    top:55px;
    width:210px}
.vendas .scene-caption{
    top:9px;
    left:28px}
.vendas .delivery-note{
    bottom:32px;
    right:5px}
.vendas .channels .container{
    flex-wrap:wrap;
    justify-content:center;
    gap:18px 24px}
.vendas .channels p{
    width:100%;
    text-align:center}
.vendas .channels p br{
    display:none}
.vendas .channels p strong{
    margin-left:4px}
.vendas .section{
    padding-block:60px}
.vendas .section-heading{
    display:block;
    margin-bottom:28px}
.vendas h2{
    font-size:34px}
.vendas .section-heading h2{
    margin-bottom:20px}
.vendas .feature-grid{
    grid-template-columns:1fr 1fr;
    gap:12px}
.vendas .feature-main{
    grid-column:span 2;
    grid-row:auto}
.vendas .link-preview{
    margin-top:28px;
    max-width:330px}
.vendas .feature h3{
    font-size:17px}
.vendas .feature-main h3{
    font-size:26px}
.vendas .feature{
    padding:22px 18px}
.vendas .feature p{
    font-size:13px}
.vendas .operations{
    padding-block:55px}
.vendas .operations-inner{
    grid-template-columns:1fr;
    gap:45px}
.vendas .operations h2{
    font-size:33px}
.vendas .steps{
    gap:22px;
    margin-top:30px}
.vendas .steps h3{
    font-size:16px}
.vendas .steps p{
    font-size:13px}
.vendas .faq-section{
    grid-template-columns:1fr;
    gap:10px;
    padding-bottom:55px}
.vendas .final-cta{
    padding:44px 20px}
.vendas .final-cta h2{
    font-size:32px}
.vendas .footer{
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
    padding-block:30px}
.vendas .footer p{
    width:100%;
    order:3}
}

@media(max-width:390px){
    .vendas .nav-actions .login{
    display:none}
.vendas .hero .text-link{
    display:flex;
    margin-left:0}
.vendas .phone{
    left:0;
    width:194px}
.vendas .order-board{
    width:270px}
.vendas .feature-grid,.vendas .steps{
    grid-template-columns:1fr}
.vendas .feature-main{
    grid-column:auto}
.vendas .steps{
    gap:10px}
.vendas .steps article{
    padding-top:20px}
.vendas .steps article>span{
    margin-bottom:16px}
.vendas .delivery-note{
    padding:12px}
.vendas .phone h2{
    font-size:17px}
.vendas .burger{
    left:28px}
}

@media(prefers-reduced-motion:reduce){
    .vendas *{
    transition:none!important;
    scroll-behavior:auto!important}
}
