/* Mega Suco · identidade tirada do logo da casa: as quatro rodelas (melancia, laranja, kiwi, mamão),
   o marrom do "megasuco", o verde do "naturalmente saudável" e o creme do miolo das frutas. */
:root{
  --creme:#FFF6DF;
  --creme-2:#FFF1BE;
  --papel:#FFFCF4;
  --marrom:#4A3626;      /* texto: 12,6:1 sobre o creme */
  --marrom-logo:#725641; /* o do logo: 6,6:1 sobre o creme */
  --verde:#88C035;
  --verde-escuro:#3F6B12; /* verde para texto: 6,1:1 sobre o creme */
  --vermelho:#F5454C;
  --vermelho-texto:#C8222B; /* 5,3:1 sobre o creme */
  --laranja:#FB8D0F;
  --kiwi:#C5E872;
  --sombra:0 18px 40px rgba(74,54,38,.14);
  --raio:22px;
  --titulo:"Bricolage Grotesque",system-ui,sans-serif;
  --texto:"Figtree",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--creme);color:var(--marrom);font:400 17px/1.55 var(--texto);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:6px}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;padding:10px clamp(16px,4vw,48px);background:var(--creme);border-bottom:1px solid rgba(114,86,65,.12)}
.topo__logo img{height:54px;width:auto}
.topo__nav{display:flex;gap:24px;font-weight:600;font-size:15px}
.topo__nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.topo__nav a:hover{border-color:var(--verde)}
.status{margin:0 0 0 auto;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--marrom-logo)}
.status__ponto{width:9px;height:9px;border-radius:50%;background:#b9a796;flex:none}
.status.is-aberto .status__ponto{background:var(--verde);box-shadow:0 0 0 4px rgba(136,192,53,.25)}
.status.is-fechado .status__ponto{background:var(--vermelho)}
.topo__pedido{display:flex;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--marrom);color:var(--creme);font:600 15px/1 var(--texto);padding:12px 16px 12px 18px;cursor:pointer}
.topo__qtd{min-width:24px;height:24px;border-radius:999px;background:var(--vermelho);color:#fff;display:grid;place-items:center;font-size:13px;padding:0 6px}

/* ---------- botões ---------- */
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font:700 16px/1 var(--texto);text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .15s ease,background .2s}
.botao:hover{transform:translateY(-2px)}
.botao--cheio{background:var(--vermelho-texto);color:#fff}
.botao--cheio:hover{background:#b01c24}
.botao--linha{border-color:var(--marrom);color:var(--marrom)}
.botao--linha:hover{background:var(--marrom);color:var(--creme)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(28px,5vw,72px) clamp(16px,4vw,48px) clamp(40px,6vw,88px);max-width:1360px;margin:0 auto;min-height:calc(100svh - 75px)}
.hero__sobre{margin:0 0 18px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-escuro)}
.hero h1{margin:0;font:800 clamp(44px,5.6vw,86px)/.95 var(--titulo);letter-spacing:-.035em;color:var(--marrom)}
.hero h1 em{font-style:normal;color:var(--vermelho-texto);white-space:nowrap}
.hero__lead{max-width:34em;margin:26px 0 0;font-size:clamp(17px,1.4vw,20px);color:#5d4634}
.hero__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__info{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.hero__info li{background:var(--papel);border:1px solid rgba(114,86,65,.14);border-radius:14px;padding:10px 14px;font-size:14px;color:#5d4634}
.hero__info b{display:block;font:800 17px/1.2 var(--titulo);color:var(--marrom)}

/* a cena: o Mega Sanduíche num prato redondo, como mais uma rodela, e as quatro frutas do logo em volta */
.hero__cena{position:relative;aspect-ratio:1;width:min(100%,600px);justify-self:center}
.hero__prato{position:absolute;inset:9%;will-change:transform;border-radius:50%;overflow:hidden;box-shadow:var(--sombra);border:10px solid var(--papel)}
.hero__prato img{width:100%;height:100%;object-fit:cover;object-position:35% 30%;transform:scale(1.22);transform-origin:38% 32%}
.rodela{position:absolute;width:24%;height:24%;will-change:transform}
.rodela--melancia{left:-2%;top:6%}
.rodela--laranja{right:-1%;top:0;width:20%;height:20%}
.rodela--kiwi{left:4%;bottom:0;width:21%;height:21%}
.rodela--mamao{right:2%;bottom:10%;width:23%;height:23%}
.hero__selo{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%) rotate(-3deg);margin:0;background:var(--marrom);color:var(--creme);border-radius:16px;padding:10px 18px;font-size:14px;line-height:1.25;text-align:center;box-shadow:var(--sombra)}
.hero__selo b{font:800 22px/1.1 var(--titulo);color:var(--kiwi)}

/* entrada: as rodelas chegam rolando, uma vez só */
@media (prefers-reduced-motion:no-preference){
  .hero__prato{animation:prato .9s cubic-bezier(.2,.8,.2,1) both}
  .rodela{animation:rolar 1.1s cubic-bezier(.2,.9,.25,1) both}
  .rodela--melancia{--de:-180%;animation-delay:.15s}
  .rodela--laranja{--de:180%;animation-delay:.3s}
  .rodela--kiwi{--de:-200%;animation-delay:.45s}
  .rodela--mamao{--de:200%;animation-delay:.6s}
  .hero__selo{animation:selo .6s .9s cubic-bezier(.2,.9,.3,1.3) both}
}
@keyframes prato{from{opacity:0;transform:scale(.88)}}
@keyframes rolar{from{opacity:0;transform:translateX(var(--de)) rotate(calc(var(--de) * 2.3))}}
@keyframes selo{from{opacity:0;transform:translateX(-50%) translateY(16px) rotate(-3deg)}}

@media (max-width:960px){
  .topo{gap:14px}
  .topo__nav{display:none}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:24px}
  .hero__cena{order:-1;width:min(86%,440px)}
}
@media (max-width:560px){
  .topo__logo img{height:42px}
  .status{font-size:12px;line-height:1.2;max-width:9.5em}
  .topo__pedido{padding:10px 10px 10px 14px;font-size:14px}
  .topo__pedido-txt{display:none}
  .topo__pedido::before{content:"Pedido"}
  .hero h1{font-size:clamp(40px,12vw,56px)}
  .hero__acoes .botao{flex:1 1 auto}
  .hero__info li{flex:1 1 40%}
}