/* ===================================================================
   FRESCO TEMPERO — Estilos
   Mobile-first, acessível (AA). Identidade visual OFICIAL da marca:
   verde vivo + marrom + carvão, fundos creme, títulos em Lora (serif)
   e corpo em Montserrat.
   =================================================================== */

/* ----------------------------- TOKENS ----------------------------- */
:root{
  /* Verdes da marca */
  --verde-vivo:   #96d53f;   /* verde vivo (folha, chips, destaques) */
  --verde:        #5c9a16;   /* verde médio (ícones/links) */
  --verde-btn:    #4e7d14;   /* botões com texto branco (contraste AA) */
  --verde-escuro: #3c6410;   /* hover */

  /* Neutros da marca */
  --marrom:  #804828;        /* marrom secundário (títulos/eyebrow) */
  --carvao:  #232b20;        /* carvão do wordmark (texto/seções escuras) */

  --texto:   #2a3325;
  --suave:   #6a7360;
  --linha:      #e7e0d2;
  --bg:         #fbf8f1;     /* off-white quente (base) */
  --creme:      #efe4cb;     /* creme quente (banda do cardápio) */
  --verde-tint: #e7f1d6;     /* verde suave (banda "como funciona") */
  --branco:     #ffffff;
  --whats:   #1fa855;

  --sombra:   0 4px 18px rgba(35,43,32,.07);
  --sombra-f: 0 12px 44px rgba(35,43,32,.18);
  --radius:   16px;
  --radius-s: 12px;
  --max:      1080px;
  --header-h: 66px;

  --sans:  "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Lora", Georgia, "Times New Roman", serif;
}

/* ----------------------------- RESET ------------------------------ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--texto);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
h1,h2,h3{ font-family:var(--serif); }
:focus-visible{ outline:3px solid var(--verde-btn); outline-offset:2px; border-radius:6px; }

.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:18px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Eyebrow serifado (substitui o script) */
.eyebrow{
  font-family:var(--serif); font-style:italic; font-weight:600;
  color:var(--marrom); font-size:1.15rem; line-height:1; display:block;
}

/* ---------------------------- HEADER ------------------------------ */
.header{
  position:sticky; top:0; z-index:60;
  height:var(--header-h);
  background:rgba(251,248,241,.92);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--linha);
  transition:box-shadow .25s;
}
.header.scrolled{ box-shadow:var(--sombra); }
.header .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; }

.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo{ height:38px; width:auto; }
.brand__sub{
  font-weight:700; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--verde); border-left:1px solid var(--linha); padding-left:10px; margin-left:2px;
}

.nav{ display:none; gap:26px; }
.nav a{ font-weight:600; font-size:.95rem; color:var(--suave); }
.nav a:hover{ color:var(--verde-escuro); }

.header__cart{
  position:relative;
  display:flex; align-items:center; gap:7px;
  background:var(--verde-btn); color:#fff;
  padding:9px 15px; border-radius:999px;
  font-weight:700; font-size:.9rem;
  box-shadow:0 4px 12px rgba(78,125,20,.3);
}
.header__cart svg{ width:18px; height:18px; }
.cart-count{
  min-width:20px; height:20px; padding:0 5px;
  background:var(--verde-vivo); color:var(--carvao);
  border-radius:999px; font-size:.72rem; font-weight:900;
  display:none; align-items:center; justify-content:center;
}
.cart-count.show{ display:inline-flex; }

/* ----------------------------- HERO ------------------------------- */
.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 88% -8%, rgba(150,213,63,.30), transparent 55%),
    radial-gradient(90% 70% at 6% 4%, rgba(128,72,40,.07), transparent 52%),
    linear-gradient(180deg, #ffffff 0%, #f4f8ec 55%, var(--verde-tint) 100%);
  padding:52px 0 52px;
  text-align:center;
  overflow:hidden;
}
.hero__tag{
  display:inline-block;
  background:rgba(150,213,63,.18); color:var(--verde-escuro);
  font-weight:700; font-size:.78rem; letter-spacing:.03em;
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2rem, 6.2vw, 3.2rem);
  line-height:1.1; letter-spacing:-.01em; font-weight:700;
  color:var(--carvao); max-width:16ch; margin-inline:auto;
}
.hero h1 span{ color:var(--verde-btn); }
.hero p{
  font-family:var(--sans);
  color:var(--suave); font-size:clamp(1rem,3.4vw,1.15rem);
  max-width:46ch; margin:16px auto 28px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:700; font-size:1rem;
  padding:14px 26px; border-radius:999px;
  transition:transform .12s, box-shadow .2s, background .2s;
  min-height:50px;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--verde-btn); color:#fff; box-shadow:0 6px 18px rgba(78,125,20,.34); }
.btn--primary:hover{ background:var(--verde-escuro); }
.btn--ghost{ background:#fff; color:var(--verde-escuro); box-shadow:var(--sombra); }
.btn--whats{ background:var(--whats); color:#fff; box-shadow:0 6px 18px rgba(31,168,85,.34); }
.btn--whats:hover{ filter:brightness(.95); }
.btn--block{ width:100%; }
.btn svg{ width:20px; height:20px; }

.hero__badges{
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center;
  margin-top:28px; color:var(--suave); font-weight:600; font-size:.9rem;
}
.hero__badges span{ display:inline-flex; align-items:center; gap:6px; }
.hero__badges svg{ width:17px; height:17px; color:var(--verde); }

/* ---------------------------- SECTIONS ---------------------------- */
.section{ padding:48px 0; }

/* Ritmo de fundos (branco <-> creme) com transições suaves.
   Hero termina em creme -> "Como funciona" abre em creme e vira branco
   -> Cardápio é uma banda creme -> CTA volta ao branco -> rodapé escuro. */
/* "Como funciona" — banda creme, entre as bandas verdes de Kits e Depoimentos */
#como-funciona{
  background:
    radial-gradient(70% 60% at 90% 8%, rgba(128,72,40,.07), transparent 60%),
    var(--creme);
}

/* CTA "Bateu a fome?" — banda VERDE FORTE full-width (o momento de cor) */
.section--pedido{
  background:
    radial-gradient(70% 130% at 94% -15%, rgba(150,213,63,.32), transparent 52%),
    linear-gradient(158deg, #3f8a2f 0%, #285a1b 100%);
  color:#fff;
}
.section--pedido .cta{
  background:transparent; background-image:none;
  box-shadow:none; border-radius:0; padding:6px 0;
}
.section--pedido .cta .eyebrow{ color:#e6f4c8; }
.section--pedido .cta h2{ color:#ffffff; }
.section--pedido .cta p{ color:rgba(255,255,255,.9); }
.section--pedido .cta .btn--primary{ background:#ffffff; color:var(--verde-escuro); box-shadow:0 8px 22px rgba(0,0,0,.18); }
.section--pedido .cta .btn--primary:hover{ background:#eef4e6; }
.section__head{ text-align:center; margin-bottom:30px; }
.section__head h2{ font-size:clamp(1.6rem,5vw,2.3rem); font-weight:700; letter-spacing:-.01em; color:var(--marrom); margin-top:4px; }
.section__head p{ font-family:var(--sans); color:var(--suave); max-width:52ch; margin:10px auto 0; }

/* Como funciona */
.steps{ display:grid; gap:16px; grid-template-columns:1fr; }
.step{
  background:#fff; border:1px solid var(--linha); border-radius:var(--radius);
  padding:24px; text-align:center; box-shadow:var(--sombra);
}
.step__num{
  width:46px; height:46px; margin:0 auto 12px;
  background:rgba(150,213,63,.18); color:var(--verde-escuro);
  border-radius:50%; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:1.25rem;
}
.step h3{ font-size:1.1rem; margin-bottom:6px; color:var(--carvao); }
.step p{ font-family:var(--sans); color:var(--suave); font-size:.94rem; }

/* --------------------------- CARDÁPIO ----------------------------- */
#cardapio{
  background:
    radial-gradient(75% 55% at 92% 6%, rgba(128,72,40,.07), transparent 60%),
    linear-gradient(180deg, var(--creme) 0%, var(--creme) 92%, #ffffff 100%);
}
.lines{ display:grid; gap:20px; grid-template-columns:1fr; }
.line-card{
  position:relative; background:#fff; border-radius:var(--radius);
  border:1px solid var(--linha); box-shadow:var(--sombra);
  overflow:hidden; display:flex; flex-direction:column;
  border-top:5px solid var(--accent, var(--verde));
}
.line-card__body{ padding:22px 20px 22px; display:flex; flex-direction:column; flex:1; }
.line-card__label{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--suave); line-height:1; }
.line-card__name{
  font-family:var(--serif);
  display:inline-block; align-self:flex-start;
  background:var(--accent, var(--verde)); color:#fff;
  font-weight:700; font-size:1.2rem; letter-spacing:.01em;
  padding:5px 16px; border-radius:10px; margin:4px 0 12px;
}
.line-card__desc{ font-family:var(--sans); color:var(--suave); font-size:.95rem; flex:1; }
.line-card__meta{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 16px; }
.chip{
  font-family:var(--sans); font-size:.78rem; font-weight:700; color:var(--verde-escuro);
  background:rgba(150,213,63,.16); padding:5px 11px; border-radius:999px;
}
.line-card__foot{ display:flex; align-items:center; margin-top:24px; padding-top:18px; border-top:1px solid var(--linha); justify-content:space-between; gap:12px; }
.line-card__price{ font-family:var(--serif); font-weight:700; font-size:1.2rem; color:var(--carvao); white-space:nowrap; }
.line-card__price small{ display:block; font-family:var(--sans); font-weight:600; font-size:.72rem; color:var(--suave); }
.line-card__btn{
  background:var(--accent, var(--verde)); color:#fff; flex:0 0 auto;
  font-family:var(--sans); font-weight:700; padding:11px 16px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.line-card__btn svg{ width:17px; height:17px; }

/* --------------------------- CTA FINAL ---------------------------- */
.cta{
  margin:8px auto 0; background:var(--carvao); color:#fff;
  border-radius:22px; padding:44px 26px; text-align:center;
  background-image:radial-gradient(90% 120% at 100% 0, rgba(150,213,63,.30), transparent 55%);
}
.cta .eyebrow{ color:var(--verde-vivo); }
.cta h2{ font-size:clamp(1.6rem,5vw,2.1rem); font-weight:700; margin:4px 0 10px; }
.cta p{ font-family:var(--sans); opacity:.85; max-width:46ch; margin:0 auto 22px; }
.cta .btn--primary{ background:var(--verde-vivo); color:var(--carvao); }
.cta .btn--primary:hover{ background:#87c531; }

/* ---------------------------- FOOTER ------------------------------ */
.footer{ background:var(--carvao); color:#e9ede4; padding:40px 0 30px; }
.footer__grid{ display:grid; gap:24px; grid-template-columns:1fr; text-align:center; }
.footer .brand{ justify-content:center; align-items:center; }
.footer__logo{ height:34px; width:auto; }
.footer__word{ font-family:var(--serif); font-weight:700; font-size:1.15rem; color:#fff; line-height:1; }
.footer__word small{ display:block; font-family:var(--sans); font-weight:600; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--verde-vivo); margin-top:3px; }
.footer__desc{ font-family:var(--sans); color:#b9c2ac; font-size:.92rem; max-width:40ch; margin:14px auto 0; }
.footer h3{ font-family:var(--sans); }
.footer__links{ display:flex; flex-direction:column; gap:9px; color:#c4ccb8; font-family:var(--sans); font-weight:600; }
.footer__links a:hover{ color:var(--verde-vivo); }
.footer__copy{ font-family:var(--sans); text-align:center; color:#96a088; font-size:.82rem; margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }

/* ====================== MODAL DE MONTAGEM ========================= */
.overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(24,30,20,.55);
  backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .25s;
}
.overlay.open{ opacity:1; visibility:visible; }

.sheet{
  position:fixed; z-index:110; left:0; right:0; bottom:0;
  max-height:92vh; background:#fff;
  border-radius:22px 22px 0 0;
  transform:translateY(100%);
  visibility:hidden;                 /* fechado NÃO captura clique/scroll */
  transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .3s, visibility 0s .3s;
  display:flex; flex-direction:column;
  box-shadow:var(--sombra-f);
}
.sheet.open{ transform:translateY(0); visibility:visible; transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .3s, visibility 0s 0s; }
.sheet__head{
  position:relative; padding:18px 20px 14px;
  border-bottom:1px solid var(--linha);
}
.sheet__grip{ width:42px; height:5px; border-radius:999px; background:var(--linha); margin:-6px auto 12px; }
.sheet__label{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--suave); line-height:1; }
.sheet__title{ font-family:var(--serif); font-size:1.5rem; font-weight:700; letter-spacing:-.01em; color:var(--carvao); }
.sheet__desc{ font-family:var(--sans); color:var(--suave); font-size:.9rem; margin-top:4px; }
.sheet__close{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; border-radius:50%;
  background:var(--creme); display:grid; place-items:center;
}
.sheet__close svg{ width:20px; height:20px; }
.sheet__body{ overflow-y:auto; padding:18px 20px 8px; -webkit-overflow-scrolling:touch; }

.group{ margin-bottom:22px; }
.group__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.group__title{ font-family:var(--serif); font-weight:700; font-size:1.1rem; color:var(--carvao); }
.group__sub{ font-family:var(--sans); font-size:.8rem; font-weight:700; color:var(--verde-escuro); background:rgba(150,213,63,.16); padding:3px 10px; border-radius:999px; }
.group__sub.req{ color:#b23; background:rgba(200,40,50,.1); }

.opt{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px; margin-bottom:9px;
  border:1.5px solid var(--linha); border-radius:var(--radius-s);
  background:#fff; width:100%; text-align:left;
  transition:border-color .15s, background .15s;
}
.opt:hover{ border-color:var(--verde-vivo); }
.opt.selected{ border-color:var(--verde-btn); background:rgba(150,213,63,.1); }
.opt__mark{
  width:24px; height:24px; flex:0 0 auto;
  border:2px solid var(--linha); border-radius:50%;
  display:grid; place-items:center; transition:.15s;
}
.opt[data-tipo="checkbox"] .opt__mark{ border-radius:7px; }
.opt.selected .opt__mark{ border-color:var(--verde-btn); background:var(--verde-btn); }
.opt__mark svg{ width:14px; height:14px; color:#fff; opacity:0; transition:.15s; }
.opt.selected .opt__mark svg{ opacity:1; }
.opt__name{ flex:1; font-family:var(--sans); font-weight:600; }
.opt.disabled{ opacity:.45; pointer-events:none; }
.opt__gram{
  display:none; align-items:center; gap:5px;
  font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--suave);
}
.opt.selected .opt__gram{ display:flex; }
.opt__gram input{
  width:58px; padding:6px 8px; border:1.5px solid var(--linha);
  border-radius:8px; font-family:inherit; font-weight:700; text-align:right; font-size:.85rem;
}

.incluso{
  display:flex; gap:9px; align-items:flex-start;
  background:rgba(150,213,63,.12); border-radius:var(--radius-s);
  padding:12px 14px; margin-bottom:22px; font-family:var(--sans); font-size:.9rem; color:var(--verde-escuro);
}
.incluso svg{ width:18px; height:18px; flex:0 0 auto; margin-top:1px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--sans); font-weight:700; font-size:.9rem; margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%; padding:12px 14px; font-family:var(--sans); font-size:1rem;
  border:1.5px solid var(--linha); border-radius:var(--radius-s); background:#fff; color:var(--texto);
}
.field textarea{ resize:vertical; min-height:72px; }

.sheet__foot{
  border-top:1px solid var(--linha);
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:#fff; display:flex; align-items:center; gap:12px;
}
.qty{
  display:flex; align-items:center; gap:2px;
  border:1.5px solid var(--linha); border-radius:999px; padding:3px;
}
.qty button{ width:38px; height:38px; border-radius:50%; font-size:1.3rem; font-weight:700; color:var(--verde-escuro); display:grid; place-items:center; }
.qty button:disabled{ opacity:.35; }
.qty span{ min-width:26px; text-align:center; font-weight:800; font-size:1.05rem; }
.sheet__foot .btn{ flex:1; }
.sheet__foot .btn small{ font-weight:600; opacity:.85; }

/* -------- Confirmação após adicionar (2 caminhos) -------- */
.sheet{ position:fixed; } /* garante contexto p/ o painel abaixo */
.sheet__done{
  position:absolute; inset:0; z-index:5;
  background:#fff; border-radius:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:32px 26px calc(26px + env(safe-area-inset-bottom));
  animation:doneIn .28s cubic-bezier(.22,1,.36,1);
}
.sheet__done[hidden]{ display:none; }   /* respeita o atributo hidden */
@keyframes doneIn{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:none; } }
.sheet__done-ico{
  width:66px; height:66px; border-radius:50%;
  background:rgba(150,213,63,.18); color:var(--verde-btn);
  display:grid; place-items:center; margin-bottom:16px;
}
.sheet__done-ico svg{ width:34px; height:34px; }
.sheet__done-title{ font-family:var(--serif); font-size:1.5rem; color:var(--carvao); margin-bottom:6px; }
.sheet__done-msg{ font-family:var(--sans); color:var(--suave); font-size:.95rem; max-width:32ch; margin-bottom:24px; }
.sheet__done-msg b{ color:var(--verde-escuro); }
.sheet__done-actions{ width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px; }

/* ========================= CARRINHO ============================== */
.cart{
  position:fixed; z-index:110; top:0; right:0; bottom:0;
  width:min(420px, 100%); background:var(--bg);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1), visibility 0s .3s;
  display:flex; flex-direction:column; box-shadow:var(--sombra-f);
}
.cart.open{ transform:translateX(0); visibility:visible; transition:transform .3s cubic-bezier(.22,1,.36,1), visibility 0s 0s; }
.cart__head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--linha); background:#fff; }
.cart__head h2{ font-family:var(--serif); font-size:1.3rem; font-weight:700; color:var(--carvao); }
.cart__body{ flex:1; overflow-y:auto; padding:16px 20px; }

.cart-empty{ text-align:center; color:var(--suave); padding:48px 10px; font-family:var(--sans); }
.cart-empty svg{ width:60px; height:60px; color:var(--linha); margin:0 auto 14px; }

.cart-item{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--linha); }
.cart-item__info{ flex:1; min-width:0; font-family:var(--sans); }
.cart-item__name{ font-weight:800; color:var(--carvao); }
.cart-item__name b{ color:var(--verde-escuro); }
.cart-item__desc{ font-size:.83rem; color:var(--suave); margin-top:3px; line-height:1.45; }
.cart-item__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.cart-item__price{ font-weight:800; color:var(--carvao); }
.cart-item .qty{ transform:scale(.86); transform-origin:left; }
.cart-item__del{ color:#b23; font-size:.82rem; font-weight:700; padding:6px; }

.cart__foot{ border-top:1px solid var(--linha); padding:16px 20px calc(16px + env(safe-area-inset-bottom)); background:#fff; }
.cart__note{ font-family:var(--sans); font-size:.82rem; color:var(--suave); margin-bottom:12px; display:flex; gap:7px; }
.cart__note svg{ width:16px; height:16px; flex:0 0 auto; color:var(--verde); margin-top:1px; }
.cart__total{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-family:var(--sans); font-size:1.05rem; }
.cart__total b{ font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--carvao); }
.cart__minimo{ font-family:var(--sans); font-size:.82rem; color:#b23; font-weight:700; text-align:center; margin-bottom:10px; display:none; }
.cart__minimo.show{ display:block; }

/* Botão flutuante de carrinho (mobile) */
.fab-cart{
  position:fixed; z-index:80; left:16px; right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:none; align-items:center; justify-content:space-between;
  background:var(--verde-btn); color:#fff; padding:14px 20px;
  border-radius:16px; box-shadow:var(--sombra-f); font-family:var(--sans); font-weight:800;
  transform:translateY(160%); transition:transform .3s;
}
.fab-cart.show{ transform:translateY(0); }
.fab-cart span:last-child{ display:inline-flex; align-items:center; gap:7px; }
.fab-cart svg{ width:19px; height:19px; }

/* ---------------------------- TOAST ------------------------------- */
.toast{
  position:fixed; z-index:200; left:50%; bottom:26px; transform:translate(-50%, calc(100% + 40px)); opacity:0;
  background:var(--carvao); color:#fff; padding:12px 20px; border-radius:999px;
  font-family:var(--sans); font-weight:700; font-size:.92rem; box-shadow:var(--sombra-f);
  display:flex; align-items:center; gap:9px; transition:transform .3s, opacity .3s; max-width:90vw;
  pointer-events:none;   /* nunca intercepta cliques */
}
.toast.show{ transform:translate(-50%, 0); opacity:1; }
.toast svg{ width:18px; height:18px; color:var(--verde-vivo); }

body.lock{ overflow:hidden; }

/* ------------------------- BREAKPOINTS ---------------------------- */
@media (max-width:720px){
  .fab-cart{ display:flex; }
  .header__cart span.txt{ display:none; }
  .header__cart{ padding:9px 12px; }
  .brand__sub{ display:none; }
}
@media (min-width:721px){
  .nav{ display:flex; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .lines{ grid-template-columns:repeat(2,1fr); }
  .sheet{ left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-46%) scale(.98);
          width:min(560px,94vw); max-height:88vh; border-radius:22px; opacity:0; }
  .sheet.open{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  .sheet__grip{ display:none; }
}
@media (min-width:960px){
  .lines{ grid-template-columns:repeat(4,1fr); }
}

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

/* ======================= ADIÇÕES (out/2026) ======================= */
/* Faixa de avisos */
.topbar{ background:var(--carvao); color:#eef6e2; font-size:.78rem; font-weight:600; overflow:hidden; white-space:nowrap; }
.topbar__track{ display:inline-flex; gap:48px; padding:8px 0; animation:topbar 20s linear infinite; }
.topbar__track span{ flex:0 0 auto; }
@keyframes topbar{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Hero com foto */
.hero__grid{ display:grid; gap:32px; align-items:center; }
.hero__media{ margin:0; border-radius:22px; overflow:hidden; box-shadow:var(--sombra-f); aspect-ratio:4/3; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }

/* Benefícios */
.perks{ background:#fff; border-block:1px solid var(--linha); padding:18px 0; }
.perks__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; }
.perk{ display:flex; gap:10px; align-items:flex-start; }
.perk svg{ width:28px; height:28px; flex:0 0 auto; color:var(--verde-btn); }
.perk b{ display:block; font-size:.88rem; color:var(--carvao); line-height:1.3; }
.perk span{ display:block; font-size:.78rem; color:var(--suave); line-height:1.35; }

/* Foto nos cards de linha */
.line-card__media{ aspect-ratio:3/2; overflow:hidden; background:var(--creme); }
.line-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.line-card:hover .line-card__media img{ transform:scale(1.04); }

/* Galeria de pratos */
.dishes{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dish{ margin:0; background:#fff; border:1px solid var(--linha); border-radius:var(--radius); overflow:hidden; box-shadow:var(--sombra); }
.dish img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.dish figcaption{ padding:10px 12px 12px; }
.dish b{ display:block; font-family:var(--serif); color:var(--carvao); font-size:1rem; }
.dish span{ font-size:.76rem; color:var(--suave); font-weight:600; }

/* Faixa verde suave */
.section--tint{ background:var(--verde-tint); }

/* Área de entrega + CEP */
.area{ display:grid; gap:24px; background:#fff; border:1px solid var(--linha); border-radius:22px; padding:28px 22px; box-shadow:var(--sombra); }
.area h2{ font-size:clamp(1.5rem,4.6vw,2.1rem); color:var(--marrom); margin:6px 0 10px; }
.area p{ color:var(--suave); }
.area__cities{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.area__cities li{ font-size:.8rem; font-weight:700; color:var(--verde-escuro); background:rgba(150,213,63,.16); padding:5px 12px; border-radius:999px; }
.cep label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:6px; }
.cep__row{ display:flex; gap:10px; }
.cep__row input{ flex:1; min-width:0; font:inherit; font-size:1.05rem; padding:12px 14px; border:1.5px solid var(--linha); border-radius:var(--radius-s); background:var(--bg); }
.cep__row input:focus{ border-color:var(--verde-btn); outline:none; }
.cep__result{ margin-top:12px; }
.cep__msg{ font-size:.9rem; padding:12px 14px; border-radius:var(--radius-s); background:var(--bg); color:var(--texto); }
.cep__msg b{ display:block; }
.cep__msg--ok{ background:#e7f1d6; color:var(--verde-escuro); }
.cep__msg--no{ background:#fbeee4; color:#7a3a14; }
.cep__msg--warn{ background:#fff6d9; color:#6b5200; }
.cep__msg .btn{ margin-top:12px; }
.cart .cep__result{ margin:-4px 0 16px; }

@media (min-width:721px){
  .hero{ text-align:left; }
  .hero__grid{ grid-template-columns:1.05fr 1fr; }
  .hero h1, .hero p{ margin-inline:0; }
  .hero__cta, .hero__badges{ justify-content:flex-start; }
  .perks__grid{ grid-template-columns:repeat(4,1fr); }
  .dishes{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .area{ grid-template-columns:1.1fr 1fr; align-items:center; padding:36px; }
}
@media (prefers-reduced-motion:reduce){
  .topbar{ white-space:normal; text-align:center; }
  .topbar__track{ animation:none; display:block; }
  .topbar__track span{ display:none; }
  .topbar__track span:first-child{ display:block; }
}

/* ===================== AJUSTES MOBILE (out/2026) ===================== */
/* Corrige o card de entrega estourando a tela (grid sem min-width) */
.area{ grid-template-columns:minmax(0,1fr); }
.area > *{ min-width:0; }

@media (max-width:720px){
  .section{ padding:40px 0; }
  .section__head{ margin-bottom:22px; }

  /* Hero mais enxuto, foto aparece logo na primeira tela */
  .hero{ padding:28px 0 32px; }
  .hero__grid{ gap:22px; }
  .hero__tag{ margin-bottom:12px; border-radius:14px; line-height:1.5; padding:6px 16px; }
  .hero__tag-sep{ display:none; }
  .hero__tag-2{ display:block; }
  .hero p{ margin:12px auto 20px; }
  .hero__cta .btn{ flex:1 1 100%; justify-content:center; }
  .hero__badges{ margin-top:18px; gap:6px 16px; font-size:.84rem; }
  .hero__media{ aspect-ratio:16/10; border-radius:18px; }

  /* Passos em linha: número à esquerda, texto à direita (metade da altura) */
  .steps{ gap:10px; }
  .step{ display:grid; grid-template-columns:42px 1fr; column-gap:14px; align-items:center; text-align:left; padding:14px 16px; }
  .step__num{ grid-row:span 2; width:42px; height:42px; margin:0; font-size:1.1rem; }
  .step h3{ font-size:1rem; margin:0; }
  .step p{ font-size:.86rem; line-height:1.45; }

  /* Cards das linhas: foto mais baixa para não alongar a rolagem */
  .lines{ gap:16px; }
  .line-card__media{ aspect-ratio:16/9; }
  .line-card__body{ padding:16px 16px 18px; }
  .line-card__name{ margin:4px 0 8px; }
  .line-card__meta{ margin:10px 0 14px; }

  /* Galeria vira carrossel deslizante */
  .dishes{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:-18px; padding:2px 18px 10px; scroll-padding-inline:18px;
    scrollbar-width:none;
  }
  .dishes::-webkit-scrollbar{ display:none; }
  .dish{ flex:0 0 68%; scroll-snap-align:start; }

  /* Entrega: botão de consultar embaixo do campo, largura total */
  .area{ padding:22px 18px; border-radius:18px; }
  .cep__row{ flex-direction:column; }
  .cep__row .btn{ width:100%; justify-content:center; }

  /* Espaço para o botão flutuante do carrinho não cobrir o rodapé:
     só quando o botão aparece, e dentro do rodapé (sem faixa clara no fim) */
  body:has(.fab-cart.show) .footer{ padding-bottom:118px; }

  /* Faixa de avisos um pouco maior para leitura */
  .topbar{ font-size:.8rem; }
}
.btn svg{ flex:0 0 auto; }
.cep__msg .btn{ padding:13px 16px; font-size:.95rem; }

/* Aviso "arraste para o lado" do carrossel de pratos (só mobile) */
.swipe-hint{ display:none; }
@media (max-width:720px){
  .swipe-hint{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:fit-content; margin:0 auto 14px; padding:7px 14px; border-radius:999px;
    background:rgba(150,213,63,.18); color:var(--verde-escuro);
    font-size:.82rem; font-weight:700;
    animation:hintPulse 1.8s ease-in-out infinite;
    transition:opacity .4s;
  }
  .swipe-hint svg{ width:18px; height:18px; flex:0 0 auto; }
  .swipe-hint__arrow{ animation:hintNudge 1.2s ease-in-out infinite; }
  .swipe-hint.is-hidden{ opacity:0 !important; animation:none; }
}
@keyframes hintPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@keyframes hintNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(6px); } }

/* Gramagem da Personalizada (digitada, 50g a 300g) */
.gram-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px;
  font-family:var(--sans); font-size:.88rem; font-weight:700; color:var(--texto); }
.gram-row input{ width:84px; padding:8px 10px; border:1.5px solid var(--linha); border-radius:10px;
  font:inherit; font-size:1rem; text-align:right; background:var(--branco); color:var(--texto); }
.gram-row input:focus{ outline:none; border-color:var(--verde-btn); }
.gram-row small{ font-weight:600; color:var(--suave); }
.gram-row.invalid input{ border-color:#c0392b; }
.gram-row.invalid small{ color:#c0392b; }

/* Desconto Pix no carrinho */
.cart__desc{ margin:0 0 4px; font-family:var(--sans); font-size:.88rem; font-weight:700; color:var(--verde-btn); }
.cart__desc:empty{ display:none; }
.cart__old{ font-size:.8em; font-weight:600; color:var(--suave); margin-right:4px; }

/* Depoimentos: carrossel com rolagem lateral */
.reviews{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 31%); gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 14px; scrollbar-width:thin;
}
@media (max-width:720px){ .reviews{ grid-auto-columns:82%; } }
.review{
  scroll-snap-align:start; margin:0; display:flex; flex-direction:column; gap:12px;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--radius); padding:20px;
}
.review__stars{ color:#e0a526; letter-spacing:2px; font-size:1rem; }
.review blockquote{ margin:0; flex:1; font-family:var(--sans); font-size:.95rem; line-height:1.55; color:var(--texto); }
.review figcaption{ display:grid; gap:2px; font-family:var(--sans); font-size:.88rem; }
.review figcaption b{ color:var(--carvao); }
.review figcaption span{ color:var(--suave); }

/* Formas de pagamento */
.pay{ list-style:none; margin:0 auto; padding:0; max-width:760px; display:grid; gap:12px; }
.pay__row{
  display:flex; align-items:center; gap:16px; padding:20px 22px;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--radius-s);
  font-family:var(--sans); font-weight:700; font-size:1rem; color:var(--carvao);
}
.pay__row svg{ width:28px; height:28px; flex:0 0 auto; color:var(--carvao); }
.pay__name{ flex:1; min-width:0; }
.pay__name small{ display:block; font-weight:600; font-size:.85rem; color:var(--suave); margin-top:2px; }
.pay__badge{
  flex:0 0 auto; background:#d07a2c; color:#fff; font-size:.78rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.03em; padding:5px 10px; border-radius:8px;
}
.pay__brands{ max-width:760px; margin:28px auto 0; }
.pay__brands p{ font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--suave); text-align:center; margin:0 0 12px; }
.pay__brands ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; }
.pay__brands li{
  display:grid; place-items:center; text-align:center; min-height:58px; padding:8px 10px;
  background:var(--branco); border:1.5px solid var(--linha); border-radius:var(--radius-s);
  font-family:var(--sans); font-weight:700; font-size:.9rem; color:var(--suave);
}
@media (max-width:480px){ .pay__row{ padding:16px; gap:12px; } .pay__badge{ font-size:.7rem; } }
@media (min-width:760px){
  .pay__brands ul{ display:flex; flex-wrap:wrap; justify-content:center; }
  .pay__brands{ max-width:900px; }
  .pay__brands li{ flex:0 0 calc((100% - 60px) / 7); min-width:0; box-sizing:border-box; padding-inline:6px; }
}

/* Kits com desconto */
.kits{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.kit-card{
  position:relative; display:flex; flex-direction:column; gap:6px;
  background:var(--branco); border:1px solid var(--linha); border-top:5px solid var(--accent);
  border-radius:var(--radius); padding:20px; box-shadow:var(--sombra);
}
.kit-card__off{
  position:absolute; top:16px; right:16px; background:#d07a2c; color:#fff;
  font-family:var(--sans); font-weight:800; font-size:.85rem; padding:4px 9px; border-radius:8px;
}
.kit-card__qty{ font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--suave); }
.kit-card__name{ margin:0; font-size:1.35rem; color:var(--carvao); }
.kit-card__price{ margin:6px 0 14px; display:grid; gap:2px; font-family:var(--sans); flex:1; align-content:start; }
.kit-card__price s, .kit-card__price small{ font-size:.85rem; font-weight:600; color:var(--suave); }
.kit-card__price b{ font-family:var(--serif); font-size:1.6rem; color:var(--carvao); }
.line-card__desc b{ color:var(--carvao); font-weight:800; }

/* Avaliações do Google */
.g-logo{ width:18px; height:18px; flex:0 0 auto; }
.g-rating{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:-12px 0 24px;
  font-family:var(--sans); font-size:.95rem; color:var(--suave); }
.g-rating .g-logo{ width:22px; height:22px; }
.g-rating b{ font-family:var(--serif); font-size:1.5rem; color:var(--carvao); }
.review .review__who{ display:flex; align-items:center; gap:12px; font-family:var(--sans); font-size:.92rem; }
.review__who img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.review .review__who > span{ flex:1; min-width:0; display:grid; gap:1px; }
.review__who b{ color:var(--carvao); }
.review__who .review__stars{ font-size:.85rem; }
.reviews__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:22px; }
.review .review__stars, .g-rating .review__stars{ color:#e0a526; letter-spacing:1px; }

/* Desconto a partir de 10 marmitas: faixa no cardápio + aviso na montagem e no carrinho */
.kit-banner{
  max-width:640px; margin:-8px auto 24px; text-align:center;
  background:#fbeedd; border:1.5px dashed #d07a2c; border-radius:var(--radius-s);
  padding:12px 16px; font-family:var(--sans); font-size:.95rem; color:var(--carvao);
}
.kit-banner b{ color:#b0601b; }
.kit-hint{
  font-family:var(--sans); font-size:.88rem; color:var(--carvao);
  background:#fbeedd; padding:10px 20px; border-top:1px solid #f0d9bd;
}
.kit-hint b{ color:#b0601b; }
.kit-hint.ok{ background:var(--verde-tint); border-top-color:#cfe3b1; }
.kit-hint.ok b{ color:var(--verde-btn); }
.kit-hint__bar{ display:block; height:6px; margin-top:7px; border-radius:99px; background:#f0d9bd; overflow:hidden; }
.kit-hint__bar i{ display:block; height:100%; background:#d07a2c; border-radius:99px; transition:width .25s; }
.cart__foot .kit-hint{ border:0; border-radius:var(--radius-s); margin-bottom:10px; padding:10px 14px; }

/* Depoimentos: setas para passar o carrossel */
.reviews-wrap{ position:relative; }
.reviews__nav{
  position:absolute; top:calc(50% - 7px); z-index:2; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center; padding:0; cursor:pointer;
  background:var(--branco); color:var(--verde-btn); border:1px solid var(--linha); border-radius:50%;
  box-shadow:var(--sombra); transition:opacity .2s, background .2s, color .2s;
}
.reviews__nav:hover{ background:var(--verde-btn); color:#fff; }
.reviews__nav:focus-visible{ outline:3px solid var(--verde-vivo); outline-offset:2px; }
.reviews__nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.reviews__nav--prev{ left:-12px; }
.reviews__nav--next{ right:-12px; }
.reviews__nav[disabled]{ opacity:0; pointer-events:none; }
@media (max-width:720px){
  .reviews__nav{ width:38px; height:38px; }
  .reviews__nav--prev{ left:-6px; }
  .reviews__nav--next{ right:-6px; }
}

/* Pedido concluído (dentro do carrinho) */
.pedido-ok{ text-align:center; padding:28px 6px; display:grid; gap:10px; justify-items:center; font-family:var(--sans); }
.pedido-ok__icon{ width:64px; height:64px; border-radius:50%; background:var(--verde-tint); color:var(--verde-btn); display:grid; place-items:center; margin-bottom:6px; }
.pedido-ok__icon svg{ width:32px; height:32px; }
.pedido-ok h3{ font-family:var(--serif); font-size:1.5rem; color:var(--carvao); margin:0; }
.pedido-ok p{ margin:0; color:var(--texto); line-height:1.5; max-width:34ch; }
.pedido-ok__total{ font-size:1.05rem; }
.pedido-ok__small{ font-size:.86rem; color:var(--suave) !important; margin-bottom:10px !important; }
.field__hint{ display:block; margin-top:5px; font-size:.8rem; color:var(--suave); font-family:var(--sans); }
#checkout.is-loading{ opacity:.7; cursor:progress; }

/* Faixa de vantagens no celular: mais respiro entre os itens */
@media (max-width:720px){
  .perks{ padding:26px 0; }
  .perks__grid{ gap:28px 18px; }
  .perk{ gap:12px; }
  .perk b{ margin-bottom:4px; }
}

/* Bandeiras no celular: 3 por linha, a última linha incompleta fica centralizada */
@media (max-width:759px){
  .pay__brands ul{ display:flex; flex-wrap:wrap; justify-content:center; }
  .pay__brands li{ flex:0 0 calc((100% - 20px) / 3); box-sizing:border-box; min-width:0; }
}

/* Logo do rodapé: o mesmo do cabeçalho, com texto branco e "congelados" sob o nome */
.footer__brand{ display:inline-flex; flex-direction:column; align-items:flex-start; }
.footer__brand img{ height:58px; width:auto; display:block; }
.footer__brand span{
  margin:4px 0 0 41%; font-family:var(--sans); font-weight:700; font-size:.62rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--verde-vivo); line-height:1;
}

/* Escolha rápida na montagem: 1 unidade ou kit com desconto explícito */
.kit-pick{ display:grid; grid-template-columns:1fr 1.35fr; gap:10px; padding:16px 20px 10px; background:#fff; border-top:1px solid var(--linha); }
.kit-pick[hidden]{ display:none; }
.kit-pick__opt{
  position:relative; display:grid; gap:3px; text-align:left; cursor:pointer;
  padding:11px 14px; border:1.5px solid var(--linha); border-radius:var(--radius-s); background:#fff;
  font-family:var(--sans); color:var(--carvao); transition:border-color .15s, background .15s;
}
.kit-pick__opt b{ font-size:.9rem; font-weight:800; }
.kit-pick__opt span{ font-size:.84rem; color:var(--suave); font-weight:600; }
.kit-pick__opt s{ color:#9aa290; font-weight:500; margin-right:2px; }
.kit-pick__opt i{
  position:absolute; top:-10px; right:10px; font-style:normal; font-size:.68rem; font-weight:800; letter-spacing:.03em;
  background:#d07a2c; color:#fff; padding:3px 8px; border-radius:999px;
}
.kit-pick__opt--kit span{ color:var(--verde-btn); font-weight:800; }
.kit-pick__opt.on{ border-color:var(--verde-btn); background:var(--verde-tint); box-shadow:inset 0 0 0 1px var(--verde-btn); }
.kit-pick__opt:focus-visible{ outline:3px solid var(--verde-vivo); outline-offset:2px; }
#sheetAdd s{ opacity:.7; font-weight:600; margin-right:2px; }

/* Atalho de kit em cada card de linha */
.line-card__kit{
  display:grid; gap:4px; width:100%; margin-top:14px; padding:11px 14px; text-align:left; cursor:pointer;
  background:#fbeedd; border:1.5px dashed #e7b98a; border-radius:var(--radius-s);
  font-family:var(--sans); color:var(--carvao); transition:background .15s, border-color .15s;
}
.line-card__kit:hover{ background:#f8e3c8; border-color:#d07a2c; }
.line-card__kit:focus-visible{ outline:3px solid var(--verde-vivo); outline-offset:2px; }
.line-card__kit-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.line-card__kit-top b{ font-size:.9rem; font-weight:800; }
.line-card__kit-top i{ font-style:normal; font-size:.68rem; font-weight:800; letter-spacing:.03em; background:#d07a2c; color:#fff; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.line-card__kit-price{ display:flex; align-items:center; gap:6px; font-size:.86rem; color:var(--suave); }
.line-card__kit-price s{ color:#9aa290; }
.line-card__kit-price small{ font-size:.78rem; font-weight:600; }
.line-card__kit-price b{ color:#b0601b; font-weight:800; font-size:.98rem; }
.line-card__kit-price svg{ width:16px; height:16px; margin-left:auto; color:#b0601b; flex:0 0 auto; }
.line-card__kit{ padding:10px 12px; }
.line-card__kit-top b, .line-card__kit-price{ white-space:nowrap; }
.line-card__kit-top b{ font-size:.86rem; }
.line-card__kit-top i{ font-size:.62rem; padding:3px 7px; }
.line-card__kit-price{ gap:5px; font-size:.8rem; }
.line-card__kit-price b{ font-size:.92rem; }
