/* Nonna Pizzaria — conceito.
   Layout: hero com wordmark gigante e pizza na frente (ref. PIEZA) → seção coral/creme com pizza girando →
   cardápio em cards → painel cinza "monte a sua" com ingredientes caindo (refs. Pata e app de voz) →
   chat no celular em lilás (ref. DishIQ) → delivery verde com letreiro e caixa 3D → avaliações → mão saindo do buraco. */
:root {
  --cream: #F3ECDF;
  --cream-2: #E8DDC8;
  --green: #20311E;
  --green-2: #2D4429;
  --coral: #F06A4C;
  --coral-d: #D6512F;
  --mustard: #F2B33D;
  --ink: #1A1915;
  --muted: #6E6658;
  --panel: #E9E7E3;
  --ok: #2FB45A;
  --lilac-1: #F4F0FD;
  --lilac-2: #DCD2F7;

  --display: "Corben", "Cooper Black", Georgia, serif;
  --ui: "Bricolage Grotesque", "Helvetica Neue", Arial, system-ui, sans-serif;

  --gutter: clamp(16px, 3.4vw, 48px);
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.skip { position: fixed; left: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 3000; background: var(--green); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 700; transform: translateY(-160%); transition: transform 0.3s; text-decoration: none; }
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-left: var(--pad-l); padding-right: var(--pad-r); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background-color 0.25s, color 0.25s; will-change: transform; }
.btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-d); }
.btn-green { background: var(--ok); color: #fff; }
.btn-green:hover { background: #239B4A; }
.wide { width: 100%; }
.round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; }
.round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.eyebrow { margin: 0; font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-d); }
.h2 { margin: 12px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.3rem, 5.6vw, 4.8rem); line-height: 0.98; letter-spacing: -0.02em; color: var(--green); text-wrap: balance; }
.h2-light { color: var(--cream); }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.wi { display: inline-block; }

/* ---------- Abertura ---------- */
.loader { display: none; }
.js .loader {
  --r: 0vmax;
  position: fixed; inset: 0; z-index: 2000; background: var(--green); color: var(--cream);
  display: grid; place-items: center; align-content: center; gap: 10px; text-align: center;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
}
.loader-pizza { width: min(34vw, 220px); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.4)); }
.loader-word { margin: 6px 0 0; display: flex; justify-content: center; font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 10vw, 7rem); line-height: 1; color: var(--cream); }
.loader-word span { display: inline-block; }
.loader-temp { position: absolute; right: var(--pad-r); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 8vw, 6rem); line-height: 1; color: var(--coral); font-variant-numeric: tabular-nums; }
.loader-temp small { font-size: 0.45em; margin-left: 4px; }
.loader-label { position: absolute; left: var(--pad-l); bottom: calc(30px + env(safe-area-inset-bottom, 0px)); margin: 0; font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(243, 236, 223, 0.7); }

/* ---------- Navegação ---------- */
.nav {
  position: fixed; left: 0; right: 0; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 20px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--pad-r) 14px var(--pad-l);
  transition: background-color 0.4s, box-shadow 0.4s;
}
html.scrolled .nav { background: rgba(243, 236, 223, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(32, 49, 30, 0.08); }
.nav-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--green); }
.logo-pizza { width: 34px; height: 34px; }
.logo-pizza circle:first-child { fill: var(--mustard); stroke: var(--coral-d); stroke-width: 3; }
.logo-pizza .logo-slice { fill: var(--cream); }
.logo-pizza circle:not(:first-child) { fill: var(--coral-d); }
.nav-pills { display: flex; gap: 8px; margin-left: auto; }
.nav-pills a { padding: 8px 16px; border: 1.5px solid var(--green); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--green); transition: background-color 0.25s, color 0.25s; }
.nav-pills a:hover { background: var(--green); color: var(--cream); }
.nav-right { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.cart-btn, .chat-cart { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--green); }
.cart-btn { border: 1.5px solid var(--green); }
.cart-btn svg, .chat-cart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; transform: scale(0); transition: transform 0.4s var(--spring); }
.has-items .cart-count { transform: scale(1); }
.nav .btn { height: 46px; padding: 0 22px; }
.menu-btn { display: none; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--green); color: var(--cream); font-weight: 700; font-size: 14px; }
.menu-mobile { position: fixed; inset: 0; z-index: 90; background: var(--green); padding: calc(100px + env(safe-area-inset-top, 0px)) var(--pad-r) 40px var(--pad-l); }
.menu-mobile nav { display: grid; }
.menu-mobile a { padding: 16px 0; border-bottom: 1px solid rgba(243, 236, 223, 0.15); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 2.2rem; color: var(--cream); }
html.menu-open .nav { background: var(--green); }
html.menu-open .nav-logo, html.menu-open .cart-btn { color: var(--cream); border-color: var(--cream); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; padding: calc(110px + env(safe-area-inset-top, 0px)) var(--pad-r) 40px var(--pad-l); display: grid; grid-template-rows: 1fr auto; isolation: isolate; }
.hero-word {
  position: absolute; left: 50%; top: 17vh; transform: translateX(-50%); z-index: 0; margin: 0;
  display: flex; justify-content: center; width: max-content;
  font-family: var(--display); font-weight: 700; font-size: clamp(6rem, 26vw, 25rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--green);
}
.hero-word span { display: inline-block; will-change: transform; }
.hero-pizza { position: absolute; z-index: 2; left: 50%; top: calc(17vh + clamp(3rem, 12vw, 12rem)); width: clamp(280px, 40vw, 600px); aspect-ratio: 1; transform: translateX(-50%); }
.hero-plate { position: absolute; left: 50%; top: 56%; width: 120%; height: 62%; transform: translate(-50%, -20%); border-radius: 50%; background: var(--coral); z-index: -1; }
.sp-stage { position: absolute; inset: 0; will-change: transform; }
.sp-stage > *, .sp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-under { filter: drop-shadow(0 30px 30px rgba(60, 25, 10, 0.35)); }
.sp-lift { filter: drop-shadow(0 26px 24px rgba(60, 25, 10, 0.5)); will-change: transform; cursor: grab; touch-action: pan-y; }
.sp-lift:active { cursor: grabbing; }
.sp-cheese { overflow: visible; pointer-events: none; }
.sp-cheese path { fill: none; stroke-linecap: round; }
.deco { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 16px 18px rgba(40, 30, 10, 0.25)); will-change: transform; }
.deco-basil-1 { width: clamp(70px, 9vw, 130px); left: 14%; top: 52%; transform: rotate(-30deg); }
.deco-basil-2 { width: clamp(70px, 9vw, 140px); right: 12%; top: 30%; transform: rotate(20deg); }
.deco-tomato { width: clamp(60px, 7vw, 110px); right: 20%; top: 70%; }
.sticker { position: absolute; z-index: 4; left: calc(50% - clamp(280px, 40vw, 600px) / 2 - clamp(20px, 3vw, 50px)); top: calc(17vh + clamp(2rem, 7vw, 7rem)); width: clamp(96px, 11vw, 160px); aspect-ratio: 1; }
.sticker svg { width: 100%; height: 100%; animation: spin 18s linear infinite; }
.sticker-bg { fill: var(--mustard); stroke: var(--green); stroke-width: 3; }
.sticker text { font-family: var(--ui); font-weight: 800; font-size: 17px; letter-spacing: 0.08em; fill: var(--green); }
.sticker-core { position: absolute; inset: 30%; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: #fff; font-family: var(--display); font-weight: 700; font-size: clamp(14px, 1.5vw, 22px); }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-foot { grid-row: 2; position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.hero-tag { margin: 0; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.35; color: var(--green); max-width: 26ch; }
.hero-card { display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 40px -24px rgba(32, 49, 30, 0.5); }
.hero-card p { margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--green); }

/* ---------- Segredo ---------- */
.secret { position: relative; background: linear-gradient(var(--coral) 0 62%, var(--cream) 62%); padding-bottom: clamp(60px, 8vw, 120px); overflow: hidden; }
.secret-top { padding-top: clamp(90px, 10vw, 140px); }
.secret-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 40px; align-items: start; position: relative; z-index: 2; }
.secret .eyebrow { color: var(--cream); }
.secret .h2 { color: var(--cream); max-width: 12ch; }
.stats { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; justify-self: end; width: min(100%, 500px); }
.stats li { display: grid; grid-template-columns: 12.5rem 1fr; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1.5px solid rgba(243, 236, 223, 0.35); color: var(--cream); }
.stats b { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats li > span { font-weight: 500; font-size: 15px; }
.secret-pizza { position: relative; z-index: 1; width: clamp(300px, 52vw, 720px); margin: clamp(10px, 2vw, 30px) auto 0; aspect-ratio: 1; }
.secret-pizza img { width: 100%; filter: drop-shadow(0 40px 40px rgba(90, 30, 10, 0.35)); }
.deco-onion { width: clamp(90px, 11vw, 170px); left: 8%; bottom: 14%; }
.deco-pepper { width: clamp(90px, 10vw, 160px); right: 9%; bottom: 22%; transform: rotate(18deg); }

/* ---------- Cardápio ---------- */
.menu { padding-block: clamp(80px, 10vw, 140px); }
.menu-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; }
.menu-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--coral); text-transform: uppercase; }
.menu-title img { display: inline-block; width: 1.2em; vertical-align: -0.18em; margin: 0 0.05em; animation: spin 14s linear infinite; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { height: 40px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--green); color: var(--green); font-weight: 600; font-size: 14px; transition: background-color 0.25s, color 0.25s; }
.chips button[aria-pressed="true"] { background: var(--green); color: var(--cream); }
.menu-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.m-card { position: relative; height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 24px; border-radius: 28px; background: #FBF7F0; border: 1.5px solid var(--cream-2); transition: transform 0.5s var(--ease-out), box-shadow 0.5s; }
.m-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(32, 49, 30, 0.45); }
.m-top { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.m-name { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; color: var(--green); }
.m-tag { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--mustard); color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.m-img { position: relative; width: 78%; margin: 4px auto 0; aspect-ratio: 1; }
.m-img::before { content: ""; position: absolute; inset: 6% 6% -2% 6%; border-radius: 50%; background: var(--c, var(--coral)); opacity: 0.18; transform: translateY(6%); }
.m-img img { position: relative; width: 100%; height: 100%; object-fit: contain; transition: transform 1.2s var(--ease-out); filter: drop-shadow(0 18px 18px rgba(60, 25, 10, 0.25)); }
.m-card:hover .m-img img { transform: rotate(40deg) scale(1.04); }
.m-desc { margin: 0; color: var(--muted); font-size: 14px; }
.m-buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.stepper { display: flex; align-items: center; gap: 2px; height: 44px; border-radius: 999px; border: 1.5px solid var(--cream-2); padding: 0 4px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; font-weight: 800; font-size: 18px; color: var(--green); }
.stepper button:hover { background: var(--cream); }
.stepper output { min-width: 22px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.m-add { height: 44px; padding: 0 16px; white-space: nowrap; border-radius: 999px; background: var(--green); color: var(--cream); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; transition: background-color 0.25s; }
.m-add:hover { background: #142112; }
.menu-note { margin: 26px 0 0; color: var(--muted); font-size: 14px; }
.m-item[hidden] { display: none !important; }

/* ---------- Monte a sua ---------- */
.builder { padding-block: clamp(40px, 6vw, 80px) clamp(80px, 10vw, 140px); }
.b-panel {
  position: relative; display: grid; grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.25fr) minmax(280px, 0.95fr); gap: clamp(16px, 2vw, 30px);
  background: var(--panel); border-radius: 40px; padding: clamp(24px, 3vw, 44px); overflow: hidden; min-height: 680px;
}
.b-hello { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: #A29C92; letter-spacing: -0.02em; }
.b-title { margin: 2px 0 26px; font-family: var(--ui); font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); max-width: 14ch; }
.b-field { border: 0; margin: 0 0 20px; padding: 0; }
.b-field legend { padding: 0; margin-bottom: 10px; font-size: 13px; color: #8D877D; }
.sizes { display: flex; gap: 10px; }
.sizes label { position: relative; }
.sizes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sizes span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #F4F3F1; font-weight: 700; color: #8D877D; transition: background-color 0.3s, color 0.3s, transform 0.3s var(--spring), box-shadow 0.3s; }
.sizes input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.35); transform: scale(1.08); }
.sizes input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }
.b-hint { margin: 8px 0 0; font-size: 13px; color: #8D877D; }
.radio { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 14.5px; cursor: pointer; }
.radio input { appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 50%; border: 2px solid #C9C4BB; display: grid; place-items: center; transition: border-color 0.2s; }
.radio input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); transform: scale(0); transition: transform 0.25s var(--spring); }
.radio input:checked { border-color: var(--ok); }
.radio input:checked::after { transform: scale(1); }
.radio em { font-style: normal; color: #8D877D; font-size: 13px; }
.b-price { margin: 24px 0 14px; font-weight: 600; font-size: clamp(2.2rem, 3.4vw, 3rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.b-add { height: 56px; padding: 0 10px 0 24px; border-radius: 16px; width: 100%; max-width: 300px; justify-content: space-between; }
.b-time { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ok); font-size: 12px; font-weight: 800; }
.b-stage { position: relative; display: grid; place-items: center; min-height: 420px; }
.b-pizza { position: relative; width: min(100%, 560px); aspect-ratio: 1; }
.b-base { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 34px 34px rgba(40, 30, 10, 0.3)); }
.b-crust { position: absolute; inset: 9.6%; border-radius: 50%; opacity: 0; transform: scale(0.94); transition: opacity 0.5s, transform 0.6s var(--spring); background: radial-gradient(circle, transparent 0 88%, rgba(255, 252, 240, 0.0) 88%, #FFF6DD 90%, #FFF1CC 94%, rgba(255, 246, 221, 0) 97%); filter: blur(0.6px); }
.b-crust.is-on { opacity: 1; transform: none; }
.b-toppings { position: absolute; inset: 0; }
.piece { position: absolute; left: 0; top: 0; width: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); will-change: transform; filter: drop-shadow(0 4px 4px rgba(50, 20, 0, 0.28)); pointer-events: none; }
.piece img, .piece svg { width: 100%; height: auto; display: block; }
.b-list { position: relative; z-index: 2; align-self: start; background: #fff; border-radius: 28px; padding: 22px 18px 14px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.4); max-height: 600px; display: flex; flex-direction: column; }
.b-list-head { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 12px; }
.b-list-head p { margin: 0; font-weight: 700; font-size: 17px; }
.b-count { flex: none; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: #E3F5E9; color: #1F8A42; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.b-list ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.b-item label { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 14px; cursor: pointer; transition: background-color 0.2s; }
.b-item label:hover { background: #F6F5F3; }
.b-ico { width: 40px; height: 40px; border-radius: 12px; background: #F4F1EC; display: grid; place-items: center; overflow: hidden; }
.b-ico img, .b-ico svg { width: 30px; height: 30px; object-fit: contain; }
.b-name { font-weight: 600; font-size: 15px; }
.b-p { font-size: 13px; color: #8D877D; font-variant-numeric: tabular-nums; }
.toggle { position: relative; width: 42px; height: 24px; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.toggle span { position: absolute; inset: 0; border-radius: 999px; background: #E2DED7; transition: background-color 0.3s; pointer-events: none; }
.toggle span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.35s var(--spring); }
.toggle input:checked + span { background: var(--ok); }
.toggle input:checked + span::after { transform: translateX(18px); }
.toggle input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }

/* ---------- Pergunte à Nonna ---------- */
.ask { position: relative; overflow: hidden; padding-block: clamp(80px, 10vw, 140px); background: radial-gradient(60% 60% at 80% 40%, #E9DFFB, rgba(233, 223, 251, 0) 70%), linear-gradient(180deg, #F6F3FB, #ECE7F7); }
.ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.ask .eyebrow { color: #7A5FD0; }
.ask .h2 { color: #221B3A; max-width: 12ch; }
.ask-text { margin: 22px 0 0; max-width: 44ch; font-size: 17px; color: #4A4360; }
.ask-note { margin: 16px 0 0; max-width: 44ch; font-size: 13px; color: #7D7695; }
.phone-wrap { perspective: 1600px; display: grid; place-items: center; }
.phone {
  width: min(380px, 100%, calc(82vh * 9 / 18.6)); min-width: min(300px, 100%); aspect-ratio: 9 / 18.6; border-radius: 54px; padding: 12px; background: linear-gradient(145deg, #4B4A48, #1E1D1C 40%, #3A3937);
  box-shadow: 0 60px 80px -40px rgba(40, 20, 80, 0.55), inset 0 0 0 2px #5C5B58;
  transform: rotateX(var(--rx, 18deg)) rotateY(var(--ry, -22deg)) rotateZ(var(--rz, 6deg)); transform-style: preserve-3d; will-change: transform;
}
.phone-screen { position: relative; height: 100%; border-radius: 43px; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(180deg, #FBFAFF 0%, #F3EEFC 55%, #E7DDF9 100%); }
.phone-island { position: absolute; left: 50%; top: 10px; width: 96px; height: 28px; border-radius: 20px; background: #111; transform: translateX(-50%); z-index: 3; }
.chat-head { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 50px 16px 10px; position: relative; }
.chat-head p { margin: 0; font-weight: 700; font-size: 14px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); }
.chat-head .orb-sm { margin-right: -4px; }
.chat-cart { position: absolute; right: 14px; top: 46px; width: 36px; height: 36px; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); color: #221B3A; }
.chat-cart svg { width: 18px; height: 18px; }
.chat-cart .cart-count { min-width: 16px; height: 16px; font-size: 9px; top: -3px; right: -3px; }
.chat-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
.chat-log::-webkit-scrollbar { display: none; }
.chat-log > * { flex-shrink: 0; }
.msg { max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.35; }
.msg-user { align-self: flex-end; background: #fff; border-bottom-right-radius: 6px; box-shadow: 0 2px 6px rgba(60, 40, 120, 0.06); }
.msg-bot { align-self: flex-start; background: #E4E1EA; border-bottom-left-radius: 6px; }
.msg-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.msg-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8E87A3; animation: blink 1s infinite; }
.msg-typing i:nth-child(2) { animation-delay: 0.15s; } .msg-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.recs { align-self: stretch; display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.recs::-webkit-scrollbar { display: none; }
.rec { flex: none; width: 74%; scroll-snap-align: start; position: relative; background: rgba(255, 255, 255, 0.9); border-radius: 22px; padding: 12px 12px 12px; box-shadow: 0 10px 24px -16px rgba(60, 40, 120, 0.4); }
.rec-rate { display: inline-flex; gap: 4px; align-items: center; padding: 3px 8px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); }
.rec-rate::before { content: "★"; color: #F2A900; }
.rec img { width: 62%; margin: 4px auto 0; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 10px rgba(60, 25, 10, 0.25)); }
.rec h4 { margin: 4px 0 0; font-weight: 700; font-size: 16px; }
.rec p { margin: 0; color: #6E6880; font-size: 13px; font-variant-numeric: tabular-nums; }
.rec-add { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); font-size: 20px; font-weight: 500; display: grid; place-items: center; }
.chat-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 8px; scrollbar-width: none; }
.chat-chips::-webkit-scrollbar { display: none; }
.chat-chips button { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid #DED6F3; font-size: 12px; font-weight: 600; color: #4A3F7A; }
.chat-form { display: flex; align-items: center; gap: 8px; margin: 0 10px 14px; padding: 6px 6px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 30px -14px rgba(90, 60, 180, 0.4); }
.chat-form input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 14px; padding: 8px 2px; }
.chat-form input:focus { outline: none; }
.chat-form:focus-within { box-shadow: 0 0 0 2px #B9A6F2, 0 10px 30px -14px rgba(90, 60, 180, 0.4); }
.chat-send { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #DED6F3; color: #3A2F6E; }
.chat-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.orb { flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 8%, rgba(255, 255, 255, 0) 30%), conic-gradient(from 0deg, #8FD3FF, #C4A7FF, #FFB8E0, #A0F0E0, #8FD3FF); box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.8), 0 6px 18px -6px rgba(130, 100, 240, 0.7); animation: orb 6s linear infinite; }
.orb-sm { width: 26px; height: 26px; }
@keyframes orb { to { filter: hue-rotate(360deg); } }
.ask.is-thinking .orb { animation-duration: 1.2s; }

/* ---------- Delivery ---------- */
.delivery { position: relative; background: var(--green); color: var(--cream); overflow: hidden; padding-block: clamp(60px, 8vw, 110px) clamp(80px, 10vw, 140px); }
.rows { display: grid; gap: 4px; }
.row { overflow: hidden; }
.row-track { display: flex; align-items: center; width: max-content; animation: marq 26s linear infinite; }
.row-b .row-track { animation-direction: reverse; animation-duration: 30s; }
.row span { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 1.05; text-transform: uppercase; padding: 0 0.35em; white-space: nowrap; }
.row span.hl { color: var(--coral); }
@keyframes marq { to { transform: translateX(-50%); } }
.box-stage { position: relative; height: clamp(320px, 42vw, 520px); margin-top: calc(-1 * clamp(160px, 18vw, 240px)); perspective: 1400px; display: grid; place-items: center; z-index: 2; }
.box { --bs: clamp(220px, 28vw, 360px); --bh: calc(var(--bs) * 0.14); position: relative; width: var(--bs); height: var(--bs); transform-style: preserve-3d; transform: translateY(var(--by, 0px)) rotateX(var(--bx, 56deg)) rotateZ(var(--bz, -30deg)); will-change: transform; }
.box > div { position: absolute; transform-style: preserve-3d; }
.box-base { inset: 0; background: #E9DFCC; transform: translateZ(0); display: grid; place-items: center; }
.box-base img { width: 92%; }
.box-side { background: #EFE6D4; border: 1px solid rgba(32, 49, 30, 0.12); }
.box-front, .box-back { left: 0; width: 100%; height: var(--bh); }
.box-front { bottom: 0; transform-origin: bottom; transform: rotateX(-90deg); }
.box-back { top: 0; transform-origin: top; transform: rotateX(90deg); }
.box-left, .box-right { top: 0; width: var(--bh); height: 100%; }
.box-left { left: 0; transform-origin: left; transform: rotateY(-90deg); }
.box-right { right: 0; transform-origin: right; transform: rotateY(90deg); }
.box-lid { inset: 0; transform-origin: top; transform: translateZ(var(--bh)) rotateX(var(--lid, 0deg)); }
.lid-out, .lid-in { position: absolute; inset: 0; backface-visibility: hidden; }
.lid-out { background: #F6F0E4; border: 1px solid rgba(32, 49, 30, 0.12); display: grid; place-items: center; align-content: center; gap: 6px; color: var(--green); }
.lid-word { font-family: var(--display); font-weight: 700; font-size: calc(var(--bs) * 0.2); line-height: 1; }
.lid-sub { font-weight: 700; font-size: calc(var(--bs) * 0.045); letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral-d); }
.lid-stamp { position: absolute; right: 8%; bottom: 8%; width: calc(var(--bs) * 0.2); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--green); font-family: var(--display); font-weight: 700; font-size: calc(var(--bs) * 0.05); }
.lid-in { background: #E2D6BE; transform: rotateX(180deg); display: grid; place-items: center; }
.lid-in span { font-family: var(--display); font-weight: 700; font-size: calc(var(--bs) * 0.09); color: var(--coral-d); opacity: 0.85; }
.box-shadow { position: absolute; left: 50%; top: 62%; width: clamp(260px, 34vw, 440px); height: 70px; transform: translate(-50%, 0); border-radius: 50%; background: rgba(0, 0, 0, 0.35); filter: blur(24px); z-index: -1; }
.delivery-info { position: relative; z-index: 3; margin-top: 20px; }
.delivery .h2 { max-width: 14ch; }
.d-cards { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.d-cards li { padding: 24px; border-radius: 26px; background: var(--green-2); display: grid; gap: 6px; }
.d-cards b { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; color: var(--mustard); }
.d-cards span { font-size: 15px; color: rgba(243, 236, 223, 0.85); }

/* ---------- Avaliações ---------- */
.reviews { padding-block: clamp(80px, 10vw, 130px) clamp(40px, 6vw, 80px); overflow: hidden; }
.rev-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.rev-track { --edge: max(var(--pad-l), calc((100vw - 1320px) / 2 + var(--pad-l))); display: flex; gap: 16px; margin-top: 36px; padding-left: var(--edge); padding-right: var(--pad-r); scroll-padding-inline: var(--edge); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rev-track::-webkit-scrollbar { display: none; }
.rev { flex: none; width: min(340px, 80vw); scroll-snap-align: start; padding: 22px; border-radius: 22px; border: 1.5px solid var(--green); background: #FBF7F0; display: grid; gap: 16px; align-content: space-between; }
.rev p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--green); }
.rev footer { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--coral); color: #fff; font-weight: 800; font-size: 13px; }
.stars { margin-left: auto; color: var(--coral); letter-spacing: 1px; }

/* ---------- Final ---------- */
.final { position: relative; padding-top: clamp(40px, 6vw, 80px); overflow: hidden; text-align: center; }
.hole { position: relative; width: clamp(260px, 30vw, 420px); height: clamp(330px, 38vw, 520px); margin: 0 auto; }
.hole-back, .hole-front { position: absolute; left: 50%; bottom: 0; width: 100%; height: 22%; transform: translateX(-50%); border-radius: 50%; }
.hole-back { background: var(--coral); }
.hole-front { height: 11%; bottom: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: var(--coral); z-index: 2; }
.hole-hand { position: absolute; left: 0; right: 0; top: 0; bottom: 11%; overflow: hidden; z-index: 1; border-radius: 0 0 50% 50% / 0 0 30px 30px; }
.hole-hand img { position: absolute; left: 50%; bottom: 0; width: 70%; transform: translate(-45%, 0); will-change: transform; }
.final-word { margin: -0.12em 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(6rem, 24vw, 23rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--green); white-space: nowrap; }
.final-cta { padding-block: clamp(44px, 5vw, 70px) clamp(70px, 8vw, 110px); display: grid; justify-items: center; gap: 14px; }
.final-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1; color: var(--green); text-transform: uppercase; }
.final-cta p { margin: 0; max-width: 46ch; color: var(--muted); }

.footer { background: var(--green); color: rgba(243, 236, 223, 0.85); padding-block: 50px calc(36px + env(safe-area-inset-bottom, 0px)); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; gap: 28px; font-size: 14px; }
.footer-grid p { margin: 0; }
.footer-logo { font-family: var(--display); font-weight: 700; font-size: 34px; color: var(--cream); margin-bottom: 6px !important; }
.footer-h { font-weight: 700; color: var(--mustard); margin-bottom: 6px !important; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-note { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid rgba(243, 236, 223, 0.15); font-size: 12.5px; color: rgba(243, 236, 223, 0.55); }

/* ---------- Carrinho ---------- */
.cart { position: fixed; inset: 0; z-index: 1500; }
.cart-backdrop { position: absolute; inset: 0; background: rgba(26, 25, 21, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cart-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--cream); display: grid; grid-template-rows: auto 1fr auto; padding: calc(22px + env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) 22px; overflow-y: auto; overscroll-behavior: contain; }
.cart-head { display: flex; align-items: center; justify-content: space-between; color: var(--green); }
.cart-head h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 2rem; }
.cart-body { padding-top: 18px; }
.cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.c-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 20px; background: #FBF7F0; border: 1.5px solid var(--cream-2); }
.c-item img { width: 64px; height: 64px; object-fit: contain; }
.c-item h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--green); }
.c-item p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.c-item .c-price { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.c-qty { display: flex; align-items: center; gap: 4px; }
.c-qty button { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--cream-2); font-weight: 800; }
.c-qty span { min-width: 18px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.cart-empty { color: var(--muted); }
.cart-foot { display: grid; gap: 8px; padding-top: 18px; border-top: 1.5px solid var(--cream-2); }
.cart-row { display: flex; justify-content: space-between; margin: 0; font-variant-numeric: tabular-nums; }
.cart-total { font-size: 18px; color: var(--green); }
.cart-foot .btn { margin-top: 8px; height: 54px; }
.track { margin-top: 20px; padding: 18px; border-radius: 22px; background: #fff; }
.track-title { margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--green); }
.track-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: s; }
.track-steps li { display: flex; gap: 10px; align-items: center; color: #A9A196; font-weight: 600; font-size: 14px; transition: color 0.3s; }
.track-steps li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; font-size: 12px; }
.track-steps li.is-done { color: var(--green); }
.track-steps li.is-done::before { content: "✓"; background: var(--ok); border-color: var(--ok); color: #fff; }
.track-steps li.is-now { color: var(--coral-d); }
.track-bar { margin-top: 14px; height: 6px; border-radius: 6px; background: var(--cream-2); overflow: hidden; }
.track-bar i { display: block; height: 100%; width: 0; background: var(--coral); }
.track-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 1600; transform: translateX(-50%); margin: 0; padding: 12px 20px; border-radius: 999px; background: var(--green); color: var(--cream); font-weight: 600; font-size: 14px; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.5); }
.fly { position: fixed; z-index: 1700; pointer-events: none; max-width: none; }

/* ---------- Cursor ---------- */
.cursor { display: none; }
html.has-cursor .cursor { display: block; position: fixed; inset: 0 auto auto 0; z-index: 2500; pointer-events: none; }
.cursor-ring { position: fixed; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), margin 0.35s var(--ease-out), background-color 0.3s; will-change: transform; mix-blend-mode: multiply; }
.cursor-label { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: #fff; opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
.cursor.has-label .cursor-ring { width: 86px; height: 86px; margin: -43px 0 0 -43px; mix-blend-mode: normal; }
.cursor.has-label .cursor-label { opacity: 1; }
html.cart-open .cursor, html.menu-open .cursor { opacity: 0; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-pills a:nth-child(3) { display: none; }
  .b-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .b-stage { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
  .b-pizza { width: min(100%, 460px); }
}
@media (max-width: 860px) {
  .nav-pills, .nav .btn { display: none; }
  .menu-btn { display: inline-block; }
  .nav-right { margin-left: auto; }
  .hero { padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
  .hero-word { top: 15vh; font-size: 27vw; }
  .hero-pizza { top: calc(15vh + 13vw); width: 78vw; }
  .sticker { left: 4vw; top: calc(15vh + 22vw); width: 92px; }
  .deco-basil-1 { left: 1%; top: 47%; width: 62px; }
  .loader-label { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .final-word { font-size: 24vw; }
  .deco-basil-2 { right: 2%; top: 28%; }
  .deco-tomato { right: 6%; top: 66%; }
  .hero-foot { flex-direction: column; align-items: stretch; }
  .hero-card { border-radius: 26px; flex-wrap: wrap; padding: 16px; }
  .secret { background: linear-gradient(var(--coral) 0 70%, var(--cream) 70%); }
  .secret-grid { grid-template-columns: 1fr; }
  .stats { justify-self: stretch; }
  .stats li { grid-template-columns: 9.5rem 1fr; }
  .secret-pizza { width: 86vw; }
  .b-panel { grid-template-columns: 1fr; border-radius: 30px; padding: 20px; }
  .b-stage { grid-column: auto; }
  .b-list { max-height: none; }
  .b-add { max-width: none; }
  .ask-grid { grid-template-columns: 1fr; }
  .phone { width: min(360px, 92vw); }
  .d-cards { grid-template-columns: 1fr; }
  .box-stage { margin-top: -90px; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .row-track { animation: none; }
  .phone { transform: none; }
}

/* =========================================================
   Rodada 2 — referências Dribbble (vídeos) + motionsites
   ========================================================= */

/* ---------- Pizza do dia: carrossel em órbita ---------- */
.spot { position: relative; overflow: hidden; background: var(--green); color: var(--cream); padding-block: clamp(80px, 9vw, 130px) clamp(50px, 6vw, 90px); }
.spot .eyebrow { color: var(--mustard); }
.spot-title { margin: 10px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; color: var(--cream); }
.spot-stage { position: relative; max-width: 1320px; margin: clamp(10px, 2vw, 30px) auto 0; height: clamp(520px, 56vw, 760px); padding-inline: var(--pad-l) var(--pad-r); touch-action: pan-y; }
.spot-rings, .spot-orbit { position: absolute; left: 50%; top: 47%; width: min(92vw, calc(clamp(520px, 56vw, 760px) * 1.06)); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.spot-rings circle { fill: none; stroke: rgba(242, 179, 61, 0.32); stroke-width: 0.14; }
.orb-item { position: absolute; left: 0; top: 0; width: 6.2%; aspect-ratio: 1; margin: -3.1% 0 0 -3.1%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35)); will-change: transform; }
.orb-item img, .orb-item svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.spot-pizzas { position: absolute; left: 50%; top: 47%; width: clamp(240px, 34vw, 470px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.spot-pizzas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, 0.45)); will-change: transform; }
.spot-info { margin: 0; }
.si { position: absolute; z-index: 2; max-width: 22ch; }
.si dt { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--cream); border-bottom: 2px solid var(--coral); padding-bottom: 2px; }
.si dd { margin: 8px 0 0; font-size: 15px; color: rgba(243, 236, 223, 0.78); }
.si-name dd, .si-price dd { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.05; color: var(--cream); }
.si-price dd { color: var(--mustard); font-variant-numeric: tabular-nums; }
.si-rate dd { color: var(--mustard); letter-spacing: 0.08em; }
.si-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.si-mask > span { display: inline-block; }
.si-name { left: var(--pad-l); top: 4%; }
.si-price { right: var(--pad-r); top: 4%; text-align: right; }
.si-ing { left: var(--pad-l); bottom: 18%; }
.si-rate { right: var(--pad-r); bottom: 18%; text-align: right; }
.spot-nav { position: absolute; left: 0; right: 0; bottom: 2%; z-index: 3; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding-inline: var(--pad-l) var(--pad-r); }
.pill-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(243, 236, 223, 0.55); color: var(--cream); font-weight: 700; font-size: 14px; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.pill-btn:hover { background: var(--cream); color: var(--green); border-color: var(--cream); }
.pill-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill-add { background: var(--coral); border-color: var(--coral); color: #fff; }
.pill-add:hover { background: var(--coral-d); border-color: var(--coral-d); color: #fff; }
.spot-thumbs { display: flex; justify-content: center; gap: clamp(10px, 2vw, 22px); padding: 22px var(--pad-r) 0 var(--pad-l); flex-wrap: wrap; }
.spot-thumbs button { position: relative; width: clamp(52px, 6vw, 74px); aspect-ratio: 1; padding: 0; border-radius: 50%; opacity: 0.5; transition: opacity 0.3s, transform 0.4s var(--spring); }
.spot-thumbs button img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)); }
.spot-thumbs button::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 22px; height: 3px; border-radius: 3px; background: var(--coral); transform: translateX(-50%) scaleX(0); transition: transform 0.4s var(--spring); }
.spot-thumbs button[aria-selected="true"] { opacity: 1; transform: scale(1.1); }
.spot-thumbs button[aria-selected="true"]::after { transform: translateX(-50%) scaleX(1); }
.spot-thumbs button:hover { opacity: 0.85; }
.spot-thumbs button:focus-visible, .pill-btn:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }

/* ---------- Monte a sua: meio a meio ---------- */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #F4F3F1; }
.seg + .seg { margin-top: 10px; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: #8D877D; white-space: nowrap; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; }
.seg input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.4); }
.seg input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 1px; }
.seg-side input:checked + span { background: var(--coral); color: #fff; }
.b-shade { position: absolute; inset: 9.6%; border-radius: 50%; opacity: 0; transition: opacity 0.5s, background 0.5s; pointer-events: none; z-index: 2; background: linear-gradient(90deg, transparent 50%, rgba(30, 18, 6, 0.28) 50%); }
.b-pizza[data-side="D"] .b-shade { background: linear-gradient(90deg, rgba(30, 18, 6, 0.28) 50%, transparent 50%); }
.b-pizza[data-mode="meio"] .b-shade { opacity: 1; }
.b-split { position: absolute; left: 50%; top: 9%; bottom: 9%; width: 3px; margin-left: -1.5px; z-index: 3; border-radius: 3px; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0 9px, transparent 9px 16px); transform: scaleY(0); transition: transform 0.7s var(--spring); pointer-events: none; }
.b-pizza[data-mode="meio"] .b-split { transform: scaleY(1); }
.b-toppings { z-index: 1; }
.b-p small { font-size: 11px; color: #A9A196; margin-left: 2px; }

/* ---------- Delivery: pizzas rolando no letreiro + pedestal ---------- */
.row-pz { font-size: clamp(2.4rem, 6vw, 5.4rem); height: 0.95em; width: auto; aspect-ratio: 1; margin: 0 0.15em; animation: roll 7s linear infinite; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)); }
.row-b .row-pz { animation-direction: reverse; }
.row span + .row-pz, .row-pz + span { margin-left: 0; }
@keyframes roll { to { transform: rotate(-360deg); } }
.box-pedestal { position: absolute; left: 50%; top: 57%; width: clamp(280px, 38vw, 520px); aspect-ratio: 3.2 / 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(60% 70% at 50% 35%, #FBF6EC, #E6DAC2); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.55), inset 0 -10px 0 rgba(32, 49, 30, 0.12); z-index: -1; }

/* ---------- Avaliações: selo ---------- */
.reviews > .wrap { position: relative; }
.rev-badge { position: absolute; right: var(--pad-r); top: -10px; width: clamp(96px, 9vw, 128px); aspect-ratio: 1; margin: 0; border-radius: 50%; background: var(--mustard); color: var(--green); display: grid; place-content: center; text-align: center; transform: rotate(-10deg); box-shadow: 0 16px 30px -16px rgba(32, 49, 30, 0.6); }
.rev-badge b { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1; }
.rev-badge span { font-size: 11px; letter-spacing: 0.1em; color: var(--coral-d); }

/* ---------- Final: letras ---------- */
.final-word span { display: inline-block; will-change: transform; }

/* ---------- Carrinho: forno + mapa ---------- */
.tv { display: grid; justify-items: center; gap: 6px; margin: 4px 0 14px; padding: 14px; border-radius: 18px; background: var(--cream); }
.tv-oven { position: relative; width: 168px; aspect-ratio: 1; }
.tv-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tv-ring circle { fill: none; stroke-width: 6; }
.tv-ring-bg { stroke: var(--cream-2); }
.tv-ring-fg { stroke: var(--coral); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.4s linear; }
.tv-oven img { position: absolute; inset: 15%; width: 70%; height: 70%; object-fit: contain; animation: spin 9s linear infinite; filter: drop-shadow(0 10px 12px rgba(60, 25, 10, 0.3)); }
.tv-min { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 4px; color: var(--green); }
.tv-oven .tv-min { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 2px 12px; border-radius: 999px; background: #fff; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.4); }
.tv-min b { font-family: var(--display); font-weight: 700; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.tv-min span { font-size: 12px; font-weight: 700; }
.tv-map { position: relative; width: 100%; }
.tv-map svg { display: block; width: 100%; height: auto; }
.tv-blocks rect { fill: #EDE4D3; }
.tv-route-bg, .tv-route { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.tv-route-bg { stroke: #E0D3BA; }
.tv-route { stroke: var(--coral); stroke-dasharray: 100; stroke-dashoffset: 100; }
.tv-shop circle { fill: var(--green); }
.tv-shop text { fill: var(--cream); font-family: var(--display); font-weight: 700; font-size: 10px; }
.tv-home circle { fill: var(--coral); }
.tv-home path { fill: #fff; }
.tv-moto circle { fill: var(--mustard); stroke: #fff; stroke-width: 2; }
.tv-moto path { fill: none; stroke: var(--green); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tv-eta { position: absolute; right: 8px; bottom: 8px; padding: 2px 12px; border-radius: 999px; background: #fff; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.4); }
.tv-status { margin: 10px 0 0; font-weight: 700; font-size: 14px; color: var(--green); }

@media (max-width: 860px) {
  .spot-stage { height: auto; padding-top: 0; display: grid; }
  .spot-rings, .spot-orbit { top: 0; width: 118vw; transform: translate(-50%, -6vw); }
  .spot-pizzas { position: relative; left: auto; top: auto; transform: none; width: 74vw; margin: 6vw auto 0; }
  .spot-info { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-top: 28px; }
  .si { position: static; max-width: none; }
  .si-price, .si-rate { text-align: right; }
  .spot-nav { position: static; margin-top: 24px; padding: 0; }
  .spot-nav { gap: 6px; }
  .pill-btn { height: 42px; padding: 0 13px; font-size: 13px; gap: 6px; }
  .rev-badge { position: relative; right: auto; top: auto; margin-top: 16px; width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .row-pz, .tv-oven img { animation: none; }
}

/* ---------- motionsites: Orbit Flora (rastro que pinta o NONNA de pizza) ---------- */
.hero-fill { z-index: 1; pointer-events: none; visibility: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hero-fill.is-on { visibility: visible; }
.hero-fill span { color: transparent; background-size: 260% auto; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; }
.hero-fill span:nth-child(1) { background-position: 20% 30%; }
.hero-fill span:nth-child(2) { background-position: 70% 60%; }
.hero-fill span:nth-child(3) { background-position: 40% 80%; }
.hero-fill span:nth-child(4) { background-position: 85% 25%; }
.hero-fill span:nth-child(5) { background-position: 30% 55%; }

/* ---------- naocodei j17: palavra que se alterna ---------- */
.rot-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.rot-word > span { display: inline-block; font-weight: 700; color: var(--coral-d); }

/* ---------- motionsites: Sparkform (NONNA empilhado + colunas) ---------- */
.final { --stack: 0.045em; }
.final-word { position: relative; z-index: 1; clip-path: inset(-60% -10% calc(-3.5 * var(--stack)) -10%); }
.final-word span { text-shadow: 0 var(--stack) 0 var(--coral), 0 calc(2 * var(--stack)) 0 var(--mustard), 0 calc(3 * var(--stack)) 0 var(--green-2); }
.final-cols { position: absolute; left: 0; right: 0; top: clamp(40px, 6vw, 80px); height: clamp(330px, 38vw, 520px); display: flex; justify-content: space-between; align-items: flex-end; padding-inline: var(--pad-l) var(--pad-r); pointer-events: none; }
.fc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fc-r { text-align: right; }
.fc li { font-family: var(--ui); font-weight: 700; font-size: clamp(1.4rem, 3.3vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: var(--green); will-change: transform; }
.fc li:nth-child(2n) { color: var(--coral); }

/* ---------- motionsites: Wayfinder (motoboy no rodapé) ---------- */
.footer { position: relative; overflow: hidden; }
.moto-lane { position: relative; height: 104px; margin-top: -30px; border-bottom: 1px dashed rgba(243, 236, 223, 0.18); }
.moto-rider { position: absolute; left: 0; bottom: 6px; width: 150px; animation: ride 11s linear infinite; }
.moto-rider svg { display: block; width: 100%; height: auto; overflow: visible; animation: bump 0.36s ease-in-out infinite alternate; }
.m-box { fill: var(--mustard); }
.m-box-t { fill: var(--green); font-family: var(--display); font-weight: 700; font-size: 20px; }
.m-rack { fill: #B98F2C; }
.m-body { fill: var(--coral); }
.m-fender { fill: none; stroke: var(--coral-d); stroke-width: 6; stroke-linecap: round; }
.m-seat { fill: var(--cream-2); }
.m-bar { stroke: var(--cream); stroke-width: 4; stroke-linecap: round; }
.m-light { fill: var(--mustard); }
.m-torso { stroke: var(--cream); stroke-width: 11; stroke-linecap: round; }
.m-arm { stroke: var(--cream); stroke-width: 6; stroke-linecap: round; }
.m-leg { fill: none; stroke: #6E8A68; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.m-helmet { fill: var(--coral); }
.m-visor { fill: #10180F; }
.m-tire { fill: #0C120B; stroke: var(--cream); stroke-width: 3; }
.m-wheel .m-hub { fill: var(--mustard); stroke: none; }
.m-wheel path { stroke: rgba(243, 236, 223, 0.5); stroke-width: 2; }
.m-wheel { animation: wheel 0.5s linear infinite; transform-box: view-box; transform-origin: 0 0; }
.puff { position: absolute; left: -6px; bottom: 6px; width: 16px; height: 16px; border-radius: 50%; background: rgba(243, 236, 223, 0.35); animation: puff 0.9s ease-out infinite; }
.puff:nth-child(3) { animation-delay: 0.3s; }
.puff:nth-child(4) { animation-delay: 0.6s; }
@keyframes ride { from { transform: translateX(-140px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes bump { to { transform: translateY(-2px) rotate(-1deg); } }
@keyframes wheel { to { transform: rotate(360deg); } }
@keyframes puff { from { transform: translate(0, 0) scale(0.4); opacity: 0.9; } to { transform: translate(-40px, -10px) scale(1.8); opacity: 0; } }

/* ---------- naocodei j29: confete de ingredientes ---------- */
.confetti { position: fixed; left: 0; top: 0; z-index: 3200; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); }
.confetti img, .confetti svg { display: block; width: 100%; height: auto; }

/* ---------- Abertura que vira o prato coral ---------- */
.oval-wipe { position: fixed; inset: 0; z-index: 3000; background: var(--coral); pointer-events: none; clip-path: ellipse(0px 0px at 50% 50%); }

/* ---------- Pizza do dia: camada de giro ---------- */
.spz { position: absolute; inset: 0; will-change: transform; }
.spz img { animation: spin 60s linear infinite; }

@media (max-width: 860px) {
  .final-cols { display: none; }
  .moto-rider { width: 110px; animation-duration: 8s; }
}
@media (prefers-reduced-motion: reduce) {
  .moto-rider, .moto-rider svg, .m-wheel, .puff, .spz img { animation: none; }
  .moto-rider { left: 50%; translate: -50% 0; }
}