/* ===========================================================================
   KIKA MARMITAS — style.css
   Direção: Vibrant & Block-based + Motion-Driven, suavizado com raios
   generosos (claymorphism-lite). Mobile-first.
   Estrutura: 1.Tokens 2.Reset 3.Utilitários 4.Motion 5.Componentes
              6.Seções 7.Comanda 8.Responsivo
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root{
  /* ---- Paleta da marca ----------------------------------------------
     Três cores do Instagram da Kika, usadas mescladas pelo site.
     Laranja e amarelo e verde só recebem texto ESCURO por cima;
     as versões *-ink existem para quando a cor precisa virar texto. */
  --brand:        #F75506;   /* laranja da marca (texto escuro por cima: 4.9:1) */
  --brand-ink:    #C94000;   /* laranja de texto e de botão.
                                  Branco por cima: 4.98:1. Ele mesmo sobre
                                  creme: 4.73:1 (o creme é mais escuro que o
                                  branco, então esta é a conta que manda). */
  --brand-deep:   #A83700;   /* hover */
  --brand-soft:   #FFE1CF;
  --brand-tint:   #FFF1E7;

  --amber:        #FAA803;   /* amarelo queimado (texto escuro: 8.3:1) */
  --amber-ink:    #8A5A00;   /* mesma família, legível em fundo claro */
  --amber-soft:   #FFEFC9;
  --amber-tint:   #FFF8E8;

  --ink:          #2E1B12;   /* café escuro — texto principal */
  --ink-2:        #6B4A38;   /* texto secundário (7.5:1 no creme) */
  --ink-3:        #8A6A57;

  --cream:        #FFF8F0;
  --cream-2:      #FDEFE2;
  --surface:      #FFFFFF;
  --line:         #F0DCC9;
  --line-strong:  #E4C6AB;

  /* Sobre o laranja o texto é sempre a tinta cheia: #F75506 é mais escuro
     que o laranja anterior, e qualquer transparência derruba o contraste
     abaixo de 4,5:1. A hierarquia sai do tamanho e do peso, não da cor. */
  --on-brand:     #2E1B12;

  --green:        #96CB38;   /* verde folha (texto escuro: 8.5:1) */
  --green-ink:    #4A6B14;   /* mesma família, legível em fundo claro (5.9:1) */
  --green-soft:   #EDF6DC;
  --green-tint:   #F5FAEA;
  --green-line:   #CFE6A8;
  --danger:       #B3261E;

  /* Raio */
  --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px;
  --r-pill: 999px;

  /* Espaço (escala 4/8) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px;

  /* Sombra — camadas suaves, tom quente */
  --sh-1: 0 1px 2px rgba(46,27,18,.06), 0 2px 6px rgba(46,27,18,.05);
  --sh-2: 0 2px 4px rgba(46,27,18,.05), 0 10px 24px rgba(46,27,18,.08);
  --sh-3: 0 8px 16px rgba(46,27,18,.08), 0 24px 48px rgba(46,27,18,.12);
  --sh-brand: 0 8px 20px rgba(217,58,0,.28);

  /* Tipografia */
  --f-head: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion — tokens compartilhados */
  --e-out:    cubic-bezier(.22,.61,.36,1);
  --e-inout:  cubic-bezier(.65,.05,.36,1);
  --e-back:   cubic-bezier(.34,1.42,.64,1);
  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   480ms;

  /* Layers */
  --z-rail: 30; --z-header: 40; --z-bar: 45; --z-overlay: 60; --z-cart: 70; --z-toast: 90;

  --header-h: 64px;
}

/* ---------------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

/* O atributo hidden precisa vencer qualquer display declarado abaixo —
   sem isso o painel da comanda e os toasts continuariam tabuláveis. */
[hidden]{ display:none !important; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Única fonte de folga para âncoras: header fixo + trilho sticky.
     Não combinar com scroll-margin-top nos alvos — os valores se somam. */
  scroll-padding-top: calc(var(--header-h) + 88px);
}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }

h1,h2,h3,h4{ font-family:var(--f-head); font-weight:600; line-height:1.1; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
img,svg{ max-width:100%; }
a{ color:inherit; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; touch-action:manipulation; }
:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--brand-ink);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------------------------------------------------------------------------
   3. UTILITÁRIOS
   --------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--s-4); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:8px; left:8px; z-index:100;
  transform:translateY(-200%);
  background:var(--ink); color:#fff; padding:12px 18px;
  border-radius:var(--r-pill); font-weight:700; text-decoration:none;
  transition:transform var(--t-base) var(--e-out);
}
.skip-link:focus{ transform:translateY(0); }

.ico{ width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor;
      stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.chapter{
  display:inline-block; font-family:var(--f-head); font-weight:600;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  /* Sobre fundo tintado o --brand-ink não chega a 4.5:1; aqui vai o tom fundo */
  color:var(--brand-deep); background:var(--brand-soft);
  padding:6px 14px; border-radius:var(--r-pill); margin-bottom:var(--s-4);
}
.chapter--light{ color:var(--ink); background:rgba(255,255,255,.85); }
.linkbtn{ color:var(--brand-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.optional{ font-weight:500; color:var(--ink-3); }
.req{ color:var(--brand-ink); }

/* Números com largura fixa: preços e contadores não “dançam” */
.num,.price,.cart__total strong,.cartbar__total,.qty__val{ font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------------------
   4. MOTION
   Tudo abaixo é transform/opacity (compositor). Estado final é o padrão:
   o JS só aplica o estado inicial quando pode animar.
   --------------------------------------------------------------------------- */
.js [data-reveal],
.js [data-reveal-group] > *{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity var(--t-slow) var(--e-out),
             transform var(--t-slow) var(--e-out);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].is-in,
.js [data-reveal-group].is-in > *{
  opacity:1;
  transform:none;
}
/* Cards do cardápio entram com leve overshoot (stagger em onda) */
.js .dish{
  opacity:0; transform:translate3d(0,26px,0) scale(.96);
  transition:opacity 420ms var(--e-out), transform 460ms var(--e-back);
  transition-delay:var(--d,0ms);
}
.js .dish.is-in{ opacity:1; transform:none; }

/* Headline: máscara por palavra */
.hero__title .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.hero__title .w > i{ display:inline-block; font-style:normal; will-change:transform; }
.js .hero__title[data-split] .w > i{
  transform:translate3d(0,110%,0);
  transition:transform 700ms var(--e-out);
  transition-delay:var(--d,0ms);
}
.js .hero__title[data-split].is-in .w > i{ transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal],
  .js [data-reveal-group] > *,
  .js .dish,
  .js .hero__title[data-split] .w > i{ opacity:1 !important; transform:none !important; }
}

/* Barra de progresso da rolagem */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:4px; z-index:calc(var(--z-header) + 1);
  background:rgba(46,27,18,.07); pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--amber),var(--brand),var(--brand-deep));
  will-change:transform;
}

/* ---------------------------------------------------------------------------
   5. COMPONENTES
   --------------------------------------------------------------------------- */

/* --- Botões --- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 22px;
  font-family:var(--f-head); font-weight:600; font-size:16px; line-height:1;
  color:var(--btn-fg); background:var(--btn-bg);
  border:2px solid var(--btn-bd); border-radius:var(--r-pill);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform var(--t-fast) var(--e-out),
             background-color var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out),
             color var(--t-base) var(--e-out);
}
.btn--lg{ min-height:56px; padding:16px 30px; font-size:17px; }
.btn--block{ width:100%; white-space:normal; line-height:1.25; text-align:center; }

.btn--primary{ --btn-bg:var(--brand-ink); --btn-fg:#fff; --btn-bd:var(--brand-ink); box-shadow:var(--sh-brand); }
.btn--primary:hover{ --btn-bg:var(--brand-deep); --btn-bd:var(--brand-deep); }

.btn--ghost{ --btn-fg:var(--ink); --btn-bd:var(--line-strong); background:rgba(255,255,255,.6); }
.btn--ghost:hover{ --btn-bd:var(--ink); background:#fff; }

.btn:active{ transform:scale(.97); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

.iconbtn{
  display:grid; place-items:center; width:44px; height:44px;
  border-radius:var(--r-pill); color:var(--ink-2);
  transition:background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.iconbtn:hover{ background:var(--cream-2); color:var(--ink); }
.iconbtn .ico{ width:22px; height:22px; }

/* --- Header --- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-header);
  padding-top:4px;
  background:rgba(255,248,240,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(46,27,18,.06); }
.header__inner{
  max-width:1180px; margin-inline:auto; padding:8px var(--s-4);
  min-height:var(--header-h);
  display:flex; align-items:center; gap:var(--s-4);
}
.logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.logo__mark{
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  border-radius:14px; color:#fff;
  background:linear-gradient(145deg,var(--brand),var(--brand-deep));
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12), var(--sh-1);
}
.logo__mark .ico{ width:22px; height:22px; }
.logo__mark--sm{ width:36px; height:36px; border-radius:12px; }
.logo__text{ font-family:var(--f-head); font-weight:700; font-size:22px; line-height:1; letter-spacing:-.02em; }
.logo__text em{ display:block; font-style:normal; font-family:var(--f-body); font-weight:700;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; }

.header__nav{ display:none; gap:var(--s-5); }
.header__nav a{
  font-weight:700; font-size:15px; text-decoration:none; color:var(--ink-2);
  padding:6px 2px; position:relative;
  transition:color var(--t-base) var(--e-out);
}
.header__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--brand-ink); border-radius:2px;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-base) var(--e-out);
}
.header__nav a:hover{ color:var(--ink); }
.header__nav a:hover::after{ transform:scaleX(1); }

.btn--cart{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink);
  min-height:44px; padding:10px 14px; gap:8px;
}
.btn--cart:hover{ --btn-bg:#432718; --btn-bd:#432718; }
.btn--cart__label{ display:none; }
.cart-count{
  display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px;
  border-radius:var(--r-pill); font-family:var(--f-body); font-weight:800; font-size:12px;
  background:var(--brand); color:var(--ink);
  transition:transform var(--t-base) var(--e-back);
}
.cart-count.is-bump{ transform:scale(1.35); }
.cart-count--solid{ background:var(--brand-ink); color:#fff; }

/* --- Cartão genérico --- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}

/* --- Campos de formulário --- */
.field{ display:grid; gap:6px; margin-bottom:var(--s-4); }
.field label{ font-weight:800; font-size:14.5px; color:var(--ink); }
.field input,.field textarea{
  width:100%; min-height:48px; padding:13px 16px;
  font-size:16px; /* 16px evita zoom automático no iOS */
  background:var(--cream); color:var(--ink);
  border:2px solid var(--line); border-radius:var(--r-sm);
  transition:border-color var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out);
}
.field textarea{ resize:vertical; line-height:1.55; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-3); opacity:.8; }
.field input:hover,.field textarea:hover{ border-color:var(--line-strong); }
.field input:focus,.field textarea:focus{ background:#fff; border-color:var(--brand-ink); outline-offset:1px; }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:var(--danger); background:#FEF4F3; }
.help{ font-size:13px; color:var(--ink-2); line-height:1.45; }
.err{ font-size:13.5px; font-weight:700; color:var(--danger); display:flex; gap:6px; align-items:flex-start; }
.err::before{ content:"!"; display:grid; place-items:center; flex:none; width:16px; height:16px;
  border-radius:50%; background:var(--danger); color:#fff; font-size:11px; margin-top:2px; }

/* --- Toast --- */
.toast{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  z-index:var(--z-toast);
  display:flex; align-items:center; gap:12px;
  padding:13px 18px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; font-weight:700; font-size:14.5px;
  box-shadow:var(--sh-3);
  transform:translate3d(-50%,20px,0); opacity:0;
  transition:transform var(--t-base) var(--e-back), opacity var(--t-base) var(--e-out);
  max-width:calc(100vw - 32px);
}
.toast.is-in{ transform:translate3d(-50%,0,0); opacity:1; }
.toast button{ color:var(--brand); font-weight:800; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }

/* ---------------------------------------------------------------------------
   6. SEÇÕES
   --------------------------------------------------------------------------- */
.section{ padding-block:var(--s-8); position:relative; }
.section--cream{ background:var(--cream); }
.section--menu{ background:var(--cream); padding-bottom:var(--s-9); }
.section__head{ max-width:620px; margin-bottom:var(--s-6); }
.section__head h2{ font-size:clamp(28px,6.4vw,42px); margin-bottom:var(--s-3); }
.section__head p{ color:var(--ink-2); font-size:17px; }
.section__head em{ font-style:normal; color:var(--brand-ink); }

/* --- HERO --- */
.hero{
  position:relative; overflow:hidden;
  padding-top:calc(var(--header-h) + 40px); padding-bottom:var(--s-8);
  background:
    radial-gradient(1000px 520px at 82% -10%, var(--brand-soft), transparent 62%),
    linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);
}
.hero__layers{ position:absolute; inset:-10% -10% -20%; pointer-events:none; }
.blob{ position:absolute; border-radius:48% 52% 60% 40% / 52% 44% 56% 48%; filter:blur(2px); opacity:.6; will-change:transform; }
.blob--1{ width:min(46vw,320px); aspect-ratio:1; top:6%; right:-8%; background:radial-gradient(circle at 35% 30%, #FFB98F, var(--brand)); opacity:.34; }
.blob--2{ width:min(34vw,230px); aspect-ratio:1; top:52%; left:-12%; background:radial-gradient(circle at 30% 30%, #FFDFA0, var(--amber)); opacity:.36; }
.blob--3{ width:min(22vw,150px); aspect-ratio:1; top:18%; left:26%; background:radial-gradient(circle at 40% 30%, #FFF0E2, #FFC9A6); opacity:.5; }
.grain{
  position:absolute; inset:0; opacity:.35; mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(46,27,18,.14) .6px, transparent .7px);
  background-size:4px 4px;
}
.hero__inner{
  position:relative; max-width:1180px; margin-inline:auto; padding-inline:var(--s-4);
  display:grid; gap:var(--s-7);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:13.5px; color:var(--brand-deep);
  background:rgba(255,255,255,.75); border:1px solid var(--brand-soft);
  padding:8px 16px; border-radius:var(--r-pill); margin-bottom:var(--s-4);
}
.hero__title{
  font-size:clamp(38px,10.4vw,74px);
  font-weight:600; line-height:1.02; letter-spacing:-.03em;
  margin-bottom:var(--s-4);
  text-wrap:balance;
}
.hero__sub{ font-size:clamp(16.5px,4.1vw,19px); color:var(--ink-2); max-width:52ch; margin-bottom:var(--s-5); }
.hero__sub strong{ color:var(--ink); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-bottom:var(--s-5); }
.hero__actions .btn[data-magnetic]{ will-change:transform; }
.hero__proof{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); font-weight:700; font-size:14.5px; color:var(--ink-2); }
.hero__proof li{ display:inline-flex; align-items:center; gap:7px; }
.hero__proof .ico{ width:18px; height:18px; color:var(--green-ink); stroke-width:2.6; }

/* Bloco de destaque (placeholder da foto) */
.hero__art{ position:relative; display:grid; place-items:center; padding-block:var(--s-4); }
.plate{
  position:relative; width:min(84vw,380px); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%;
  background:conic-gradient(from 200deg, var(--brand), var(--amber), #FF8A4C, var(--brand));
  box-shadow:0 30px 60px rgba(217,58,0,.28), inset 0 -8px 24px rgba(0,0,0,.12);
  will-change:transform;
}
.plate__ring{
  position:absolute; inset:14px; border-radius:50%;
  border:2px dashed rgba(255,255,255,.55);
}
.plate__inner{
  position:relative; width:76%; aspect-ratio:1; border-radius:50%;
  background:var(--cream);
  box-shadow:inset 0 2px 0 #fff, 0 12px 28px rgba(46,27,18,.18);
  display:grid; align-content:center; justify-items:center; gap:6px;
  text-align:center; padding:22px;
}
.plate__label{ font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-ink); }
.plate__dish{ font-family:var(--f-head); font-weight:600; font-size:clamp(19px,4.6vw,24px); line-height:1.12; text-wrap:balance; }
.plate__side{ font-size:13.5px; color:var(--ink-2); line-height:1.35; text-wrap:balance; }
.plate__price{
  margin-top:10px; font-family:var(--f-head); font-weight:700;
  font-size:clamp(34px,8vw,46px); line-height:1; letter-spacing:-.02em;
  color:var(--brand-ink);
}
.sticker{
  position:absolute; font-family:var(--f-head); font-weight:600; font-size:14px;
  padding:9px 16px; border-radius:var(--r-pill); background:var(--surface);
  box-shadow:var(--sh-2); border:1px solid var(--line);
}
/* Coladas na borda do prato, não nos cantos do bloco */
.sticker--a{ top:9%;    left:8%;  transform:rotate(-7deg); color:var(--brand-ink); }
.sticker--b{ bottom:11%; right:6%; transform:rotate(6deg);  color:var(--ink-2); }

/* --- Marquee movido pela rolagem --- */
.marquee{
  overflow:hidden; background:var(--ink); color:var(--cream);
  padding-block:14px; border-block:3px solid var(--brand);
}
.marquee__track{
  display:flex; align-items:center; gap:22px; width:max-content;
  font-family:var(--f-head); font-weight:600; font-size:clamp(14px,3.6vw,17px);
  letter-spacing:.02em; text-transform:lowercase; white-space:nowrap;
  will-change:transform;
}
.marquee__track i{ font-style:normal; color:var(--brand); }

/* --- Como funciona --- */
.steps{ display:grid; gap:var(--s-3); }
.step{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-5);
  box-shadow:var(--sh-1);
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.step__icon{
  display:grid; place-items:center; width:50px; height:50px; margin-bottom:var(--s-3);
  border-radius:16px; color:var(--brand-ink); background:var(--brand-tint);
  border:1px solid var(--brand-soft);
}
.step__icon .ico{ width:24px; height:24px; }
.step h3{ font-size:20px; margin-bottom:6px; }
.step p{ color:var(--ink-2); font-size:15.5px; }
.step strong{ color:var(--ink); }

/* --- Trilho de categorias (sticky + scrollspy) --- */
.railwrap{
  position:sticky; top:var(--header-h); z-index:var(--z-rail);
  background:rgba(255,248,240,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-block:1px solid transparent;
  transition:border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
  margin-bottom:var(--s-5);
}
.railwrap.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 18px rgba(46,27,18,.06); }
.rail__wrap{ display:flex; align-items:center; gap:var(--s-3); padding-block:10px; }
.rail{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  padding:2px; margin:-2px; flex:1 1 auto;
}
.rail::-webkit-scrollbar{ display:none; }
.rail__btn{
  scroll-snap-align:start; flex:none; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:10px 18px;
  font-family:var(--f-head); font-weight:600; font-size:15px; white-space:nowrap;
  color:var(--ink-2); background:var(--surface);
  border:2px solid var(--line); border-radius:var(--r-pill);
  transition:color var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out), transform var(--t-fast) var(--e-out);
}
.rail__btn:hover{ border-color:var(--line-strong); color:var(--ink); }
.rail__btn:active{ transform:scale(.96); }
.rail__btn[aria-current="true"]{ color:var(--ink); background:var(--brand); border-color:var(--brand); }
.rail__btn .n{ font-family:var(--f-body); font-weight:800; font-size:12px; opacity:.72; }

.vegtoggle{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:10px 16px;
  font-weight:800; font-size:14px; color:var(--green-ink);
  background:var(--surface); border:2px solid var(--line); border-radius:var(--r-pill);
  transition:background-color var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out), transform var(--t-fast) var(--e-out);
}
.vegtoggle:active{ transform:scale(.96); }
.vegtoggle[aria-pressed="true"]{ background:var(--green-soft); border-color:var(--green-ink); }
.vegtoggle .ico{ width:18px; height:18px; }
.vegtoggle span{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }

/* --- Cardápio --- */
.catgroup{ margin-bottom:var(--s-7); }
.catgroup[hidden]{ display:none; }
.catgroup__head{ display:flex; align-items:baseline; gap:12px; margin-bottom:var(--s-4); padding-top:4px; }
.catgroup__head h3{ font-size:clamp(22px,5.4vw,30px); }
.catgroup__head span{ font-size:13.5px; font-weight:700; color:var(--ink-3); }

.dishes{ display:grid; gap:var(--s-3); }

.dish{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-4);
  box-shadow:var(--sh-1);
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out);
}
.dish:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-strong); }
.dish.is-active{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft), var(--sh-2); }
.dish[hidden]{ display:none; }

.dish__top{ display:flex; gap:var(--s-3); align-items:flex-start; margin-bottom:var(--s-3); }
.dish__thumb{
  flex:none; width:66px; height:66px; border-radius:18px;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--brand-soft),var(--amber-soft));
  border:1px solid var(--line);
  font-family:var(--f-head); font-weight:600; font-size:21px; color:var(--brand-deep);
}
.dish__info{ flex:1 1 auto; min-width:0; }
.dish__name{ font-size:17.5px; line-height:1.2; margin-bottom:4px; text-wrap:balance; }
.dish__desc{ font-size:14.5px; color:var(--ink-2); line-height:1.45; overflow-wrap:anywhere; }
.badge{
  display:inline-flex; align-items:center; gap:5px; margin-top:8px;
  font-size:12px; font-weight:800; letter-spacing:.02em;
  color:var(--green-ink); background:var(--green-soft);
  border:1px solid var(--green-line); padding:4px 10px; border-radius:var(--r-pill);
}
.badge .ico{ width:13px; height:13px; stroke-width:2.4; }

.dish__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:auto; }
.price{ font-family:var(--f-head); font-weight:600; font-size:21px; color:var(--ink); line-height:1; }
.price small{ display:block; font-family:var(--f-body); font-size:11.5px; font-weight:700; color:var(--ink-3); margin-top:3px; }

/* Botão "Adicionar" que vira stepper */
.dish__action{ flex:none; }
.add{
  --btn-bg:var(--brand-ink); --btn-fg:#fff; --btn-bd:var(--brand-ink);
  min-height:44px; padding:11px 20px; font-size:15px; box-shadow:var(--sh-brand);
}
.add:hover{ --btn-bg:var(--brand-deep); --btn-bd:var(--brand-deep); }

.qty{
  display:inline-flex; align-items:center; gap:2px;
  background:var(--brand-ink); border-radius:var(--r-pill); padding:3px;
  box-shadow:var(--sh-brand);
}
.qty__btn{
  display:grid; place-items:center; width:38px; height:38px;
  border-radius:var(--r-pill); color:#fff;
  transition:background-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.qty__btn:hover{ background:rgba(255,255,255,.18); }
.qty__btn:active{ transform:scale(.9); }
.qty__btn .ico{ width:18px; height:18px; stroke-width:2.6; }
.qty__val{
  min-width:26px; text-align:center; font-family:var(--f-head); font-weight:600;
  font-size:16px; color:#fff;
}

/* Partícula que “voa” até a comanda */
.fly{
  position:fixed; z-index:var(--z-toast); pointer-events:none;
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--brand-ink); color:#fff;
  font-family:var(--f-head); font-weight:600; font-size:14px;
  box-shadow:var(--sh-brand);
}

.menu-empty{
  text-align:center; color:var(--ink-2); padding:var(--s-6) var(--s-4);
  background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--r-lg);
}
.menu-note{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:var(--s-5); padding:var(--s-4) var(--s-5);
  background:var(--amber-soft); border:1px solid #F5DFA6; border-radius:var(--r-lg);
  font-size:15px; color:var(--ink);
}
.menu-note .ico{ color:var(--amber); flex:none; margin-top:2px; }
.menu-note a{ font-weight:800; color:var(--brand-ink); text-underline-offset:3px; }

/* --- Personalizado --- */
.section--custom{
  background:
    radial-gradient(700px 400px at 12% 0%, rgba(255,255,255,.34), transparent 60%),
    linear-gradient(160deg,var(--brand) 0%, #FF7A3D 52%, var(--amber) 100%);
  color:var(--ink);
}
.custom{ display:grid; gap:var(--s-6); }
.custom__copy h2{ font-size:clamp(28px,6.6vw,44px); margin-bottom:var(--s-3); }
.custom__copy h2 em{ font-style:normal; color:#fff; }
.custom .lead{ font-size:17.5px; max-width:46ch; margin-bottom:var(--s-4); }
.custom__list{ display:grid; gap:10px; font-weight:700; font-size:15.5px; }
.custom__list li{ display:flex; gap:9px; align-items:flex-start; }
.custom__list .ico{ width:19px; height:19px; stroke-width:2.6; flex:none; margin-top:2px; }
.form{ padding:var(--s-5); }
.form__note{ margin-top:var(--s-3); font-size:13px; color:var(--ink-2); text-align:center; line-height:1.45; }

/* --- Footer --- */
.footer{ background:var(--ink); color:var(--cream-2); padding-top:var(--s-8); }
.footer__inner{ display:grid; gap:var(--s-5); padding-bottom:var(--s-6); }
.footer__brand{ display:flex; gap:14px; align-items:center; }
.footer__brand p{ font-size:15px; line-height:1.4; }
.footer__brand strong{ font-family:var(--f-head); font-weight:600; font-size:19px; color:#fff; }
.footer__links{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
.footer__link{
  display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:12px 20px;
  font-weight:800; font-size:15px; text-decoration:none; color:var(--cream);
  border:2px solid rgba(255,248,240,.24); border-radius:var(--r-pill);
  transition:background-color var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.footer__link:hover{ background:var(--brand); border-color:var(--brand); color:var(--ink); }
.footer__note{ font-size:14px; color:#CBB6A6; max-width:62ch; line-height:1.55; }
.footer__note strong{ color:var(--brand); }
.footer__credits{
  border-top:1px solid rgba(255,248,240,.14); margin:0;
  padding:var(--s-4) var(--s-4) calc(env(safe-area-inset-bottom,0px) + var(--s-4));
  text-align:center; font-size:13px; color:#A98D7B;
}

/* ---------------------------------------------------------------------------
   7. COMANDA
   --------------------------------------------------------------------------- */

/* Barra fixa mobile */
.cartbar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bar);
  padding:10px var(--s-4) calc(env(safe-area-inset-bottom,0px) + 10px);
  background:rgba(255,248,240,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translate3d(0,120%,0);
  transition:transform 360ms var(--e-back);
}
.cartbar.is-in{ transform:none; }
.cartbar__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:56px; padding:12px 16px 12px 12px;
  background:var(--ink); color:#fff; border-radius:var(--r-pill);
  font-family:var(--f-head); font-weight:600; font-size:17px;
  box-shadow:var(--sh-3);
  transition:transform var(--t-fast) var(--e-out);
}
.cartbar__btn:active{ transform:scale(.985); }
.cartbar__left{ display:inline-flex; align-items:center; gap:11px; }
.cartbar__total{ font-size:18px; }

/* Overlay */
.overlay{
  position:fixed; inset:0; z-index:var(--z-overlay);
  background:rgba(46,27,18,.58);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--t-base) var(--e-out);
}
.overlay.is-in{ opacity:1; }

/* Painel */
.cart{
  position:fixed; z-index:var(--z-cart);
  left:0; right:0; bottom:0; top:56px;
  display:flex; flex-direction:column;
  background:var(--cream);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-3);
  transform:translate3d(0,100%,0);
  transition:transform 420ms var(--e-out);
  will-change:transform;
}
.cart.is-in{ transform:none; }
.cart__grab{ width:44px; height:5px; border-radius:99px; background:var(--line-strong); margin:10px auto 0; }
.cart__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-4) var(--s-4) var(--s-3);
  border-bottom:1px solid var(--line);
}
.cart__head h2{ font-size:24px; }
.cart__sub{ font-size:13.5px; color:var(--ink-2); margin-top:3px; }
.cart__body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:var(--s-4); }
.cart__list{ display:grid; gap:10px; }

.citem{
  display:grid; grid-template-columns:1fr auto; gap:4px var(--s-3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:14px;
  animation:citem-in 320ms var(--e-out) both;
}
@keyframes citem-in{ from{ opacity:0; transform:translate3d(0,10px,0); } }
.citem__name{ font-family:var(--f-head); font-weight:600; font-size:16px; line-height:1.22; grid-column:1; }
.citem__unit{ grid-column:1; font-size:13px; color:var(--ink-2); }
.citem__sub{ grid-column:2; grid-row:1; font-family:var(--f-head); font-weight:600; font-size:17px; text-align:right; font-variant-numeric:tabular-nums; }
.citem__ctrl{ grid-column:2; grid-row:2; display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.citem .qty{ background:var(--cream-2); box-shadow:none; border:1px solid var(--line); }
.citem .qty__btn{ width:34px; height:34px; color:var(--ink); }
.citem .qty__btn:hover{ background:#fff; }
.citem .qty__val{ color:var(--ink); font-size:15px; }
.citem__del{
  display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r-pill);
  color:var(--ink-3);
  transition:color var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out);
}
.citem__del:hover{ color:var(--danger); background:#FDF0EF; }
.citem__del .ico{ width:17px; height:17px; }

.cart__empty{ text-align:center; padding:var(--s-7) var(--s-4); display:grid; gap:8px; justify-items:center; }
.cart__empty[hidden]{ display:none; }
.cart__empty-ico{
  display:grid; place-items:center; width:66px; height:66px; border-radius:22px;
  background:var(--cream-2); color:var(--ink-3); margin-bottom:4px;
}
.cart__empty-ico .ico{ width:30px; height:30px; }
.cart__empty p{ color:var(--ink-2); font-size:15px; max-width:32ch; }
.cart__empty strong{ font-family:var(--f-head); font-weight:600; font-size:18px; color:var(--ink); }
.cart__empty .btn{ margin-top:var(--s-3); }

.cart__extras{ margin-top:var(--s-5); display:grid; gap:var(--s-4); }
.periods{ border:0; padding:0; margin:0; }
.periods legend{ font-weight:800; font-size:14.5px; padding:0; margin-bottom:8px; }
.periods__row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.chip span{
  display:grid; place-items:center; min-height:44px; padding:10px 20px;
  font-weight:800; font-size:14.5px; color:var(--ink-2);
  background:var(--surface); border:2px solid var(--line); border-radius:var(--r-pill);
  transition:background-color var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out);
}
.chip input:hover + span{ border-color:var(--line-strong); }
.chip input:focus-visible + span{ outline:3px solid var(--brand-ink); outline-offset:2px; }
.chip input:checked + span{ background:var(--brand); border-color:var(--brand); color:var(--ink); }

.cart__foot{
  flex:none; padding:var(--s-4) var(--s-4) calc(env(safe-area-inset-bottom,0px) + var(--s-4));
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(46,27,18,.07);
}
.cart__foot[hidden]{ display:none; }
.cart__total{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:var(--s-3); font-weight:800;
}
.cart__total span{ font-size:15px; color:var(--ink-2); }
.cart__total strong{ font-family:var(--f-head); font-weight:600; font-size:28px; }
.cart__disclaimer{ margin-top:10px; font-size:12.5px; color:var(--ink-3); text-align:center; line-height:1.45; }

/* ---------------------------------------------------------------------------
   8. RESPONSIVO
   --------------------------------------------------------------------------- */
@media (min-width:600px){
  .wrap{ padding-inline:var(--s-5); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:var(--s-4); }
  .dishes{ grid-template-columns:repeat(2,1fr); gap:var(--s-4); }
  .vegtoggle span{ position:static; width:auto; height:auto; clip:auto; overflow:visible; }
  .hero__inner{ padding-inline:var(--s-5); }
  .cart{ top:auto; height:min(92vh,780px); }
}

@media (min-width:900px){
  :root{ --header-h:72px; }
  .section{ padding-block:var(--s-9); }
  .header__nav{ display:flex; }
  .btn--cart{ padding:11px 20px; }
  .btn--cart__label{ display:inline; }
  .hero{ padding-top:calc(var(--header-h) + 56px); padding-bottom:var(--s-9); }
  .hero__inner{ grid-template-columns:1.05fr .95fr; align-items:center; gap:var(--s-7); }
  .steps{ grid-template-columns:repeat(4,1fr); }
  .dishes{ grid-template-columns:repeat(3,1fr); }
  .custom{ grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:center; }
  .form{ padding:var(--s-6); }
  .footer__inner{ grid-template-columns:1fr auto; align-items:center; }
  .footer__note{ grid-column:1 / -1; }

  /* Comanda vira drawer lateral */
  .cartbar{ display:none; }
  .cart{
    left:auto; right:0; top:0; bottom:0; height:auto;
    width:min(440px,92vw);
    border-radius:var(--r-xl) 0 0 var(--r-xl);
    transform:translate3d(100%,0,0);
  }
  .cart.is-in{ transform:none; }
  .cart__grab{ display:none; }
  .cart__head{ padding-top:var(--s-5); }
  .toast{ bottom:32px; left:32px; transform:translate3d(0,20px,0); }
  .toast.is-in{ transform:none; }
}

@media (min-width:1180px){
  .dishes{ gap:var(--s-5); }
  .plate{ width:min(30vw,420px); }
}

/* Landscape baixo: reduz respiro vertical do hero */
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding-top:calc(var(--header-h) + 20px); padding-bottom:var(--s-6); }
  .hero__art{ display:none; }
}

@media print{
  .header,.cartbar,.cart,.overlay,.scroll-progress,.marquee,.toast{ display:none !important; }
}

/* ---------------------------------------------------------------------------
   9. GUARDAS DE LARGURA
   Itens de grid/flex têm min-width:auto por padrão e podem estourar o
   contêiner quando o conteúdo tem min-content largo (ex.: um botão nowrap).
   Estas regras travam isso — nada de rolagem horizontal no mobile.
   --------------------------------------------------------------------------- */
.custom > *,
.steps > *,
.dishes > *,
.hero__inner > *,
.footer__inner > *,
.field,
.field input,
.field textarea,
.dish__foot,
.citem,
.cartbar__btn{ min-width:0; }

.citem__name,
.dish__name,
.step p,
.custom__list li{ overflow-wrap:anywhere; }

.cartbar__txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.rail__btn[hidden]{ display:none; }

/* ---------------------------------------------------------------------------
   11. DÚVIDAS
   --------------------------------------------------------------------------- */
.section--faq{ background:var(--cream-2); }
.faq__list{ display:grid; gap:10px; max-width:820px; }
.qa{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
  transition:border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.qa[open]{ border-color:var(--brand-soft); box-shadow:var(--sh-1); }
.qa summary{
  display:flex; align-items:center; gap:var(--s-3);
  padding:18px var(--s-4); min-height:60px;
  font-family:var(--f-head); font-weight:600; font-size:17px; line-height:1.25;
  cursor:pointer; list-style:none;
  transition:background-color var(--t-base) var(--e-out);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ background:var(--cream); }
.qa summary:focus-visible{ outline:3px solid var(--brand-ink); outline-offset:-3px; }
/* Sinal de abrir/fechar: um "+" que vira "−" */
.qa summary::after{
  content:""; flex:none; margin-left:auto; width:22px; height:22px;
  background:
    linear-gradient(currentColor,currentColor) center/12px 2.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/2.5px 12px no-repeat;
  color:var(--brand-ink); border-radius:4px;
  transition:transform var(--t-base) var(--e-out);
}
.qa[open] summary::after{
  background:linear-gradient(currentColor,currentColor) center/12px 2.5px no-repeat;
  transform:rotate(180deg);
}
.qa__body{ padding:0 var(--s-4) 20px; }
.qa__body p{ color:var(--ink-2); font-size:15.5px; max-width:62ch; }
.qa__body a{ font-weight:800; color:var(--brand-ink); text-underline-offset:3px; }
.qa[open] .qa__body{ animation:qa-in 280ms var(--e-out) both; }
@keyframes qa-in{ from{ opacity:0; transform:translate3d(0,-6px,0); } }

/* ---------------------------------------------------------------------------
   12. DETALHE DO PRATO
   --------------------------------------------------------------------------- */
/* A miniatura vira botão: mesmo visual, com afordância de ampliar */
.dish__thumb{
  position:relative; cursor:zoom-in; overflow:hidden; padding:0;
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.dish__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.dish__thumb::after{
  content:""; position:absolute; right:5px; bottom:5px; width:20px; height:20px;
  border-radius:7px; background:rgba(46,27,18,.72);
  /* duas setas opostas, desenhadas em CSS (sem pedir mais um ícone) */
  background-image:
    linear-gradient(45deg, transparent 42%, #fff 42% 50%, transparent 50%),
    linear-gradient(225deg, transparent 42%, #fff 42% 50%, transparent 50%);
  background-size:11px 11px, 11px 11px;
  background-position:3px 3px, 6px 6px;
  background-repeat:no-repeat;
  opacity:0; transform:scale(.7);
  transition:opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-back);
}
.dish:hover .dish__thumb::after,
.dish__thumb:focus-visible::after{ opacity:1; transform:none; }
.dish__thumb:hover{ transform:scale(1.04); box-shadow:var(--sh-2); }
@media (hover:none){ .dish__thumb::after{ opacity:1; transform:none; } }

.dishmodal{
  position:fixed; z-index:var(--z-cart);
  left:50%; top:50%; transform:translate3d(-50%,-46%,0) scale(.94);
  width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 48px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--cream); border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
  opacity:0;
  transition:opacity var(--t-base) var(--e-out), transform 320ms var(--e-back);
}
.dishmodal.is-in{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1); }
.dishmodal__close{
  position:absolute; top:10px; right:10px; z-index:2;
  background:rgba(255,248,240,.92); color:var(--ink);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:var(--sh-1);
}
.dishmodal__close:hover{ background:#fff; }
.dishmodal__media{
  margin:0; flex:none; aspect-ratio:4/3; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--brand-soft),var(--amber-soft));
  border-bottom:1px solid var(--line);
}
.dishmodal__media img{ width:100%; height:100%; object-fit:cover; }
.dishmodal__ph{
  font-family:var(--f-head); font-weight:600; font-size:64px; color:var(--brand-deep);
  display:grid; justify-items:center; gap:6px;
}
.dishmodal__ph small{ font-family:var(--f-body); font-size:12px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.dishmodal__body{ padding:var(--s-5); overflow-y:auto; }
.dishmodal__name{ font-size:24px; line-height:1.15; margin-bottom:8px; text-wrap:balance; }
.dishmodal__desc{ color:var(--ink-2); font-size:16px; }
.dishmodal__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); margin-top:var(--s-5);
  padding-top:var(--s-4); border-top:1px solid var(--line);
}
.dishmodal__foot .price{ font-size:26px; }

/* ---------------------------------------------------------------------------
   13. RESUMO DE VALORES NA COMANDA
   --------------------------------------------------------------------------- */
.cart__sum{ margin:0 0 10px; display:grid; gap:5px; }
.cart__sum > div{ display:flex; align-items:baseline; justify-content:space-between; }
.cart__sum dt{ font-size:14.5px; color:var(--ink-2); }
.cart__sum dd{ margin:0; font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.cart__sum .is-free{ color:var(--green-ink); text-transform:uppercase; font-size:12.5px; letter-spacing:.06em; }
.cart__minimo{
  display:flex; gap:9px; align-items:flex-start;
  margin-top:10px; padding:11px 14px;
  background:var(--amber-soft); border:1px solid #F5DFA6; border-radius:var(--r-sm);
  font-size:13.5px; line-height:1.4; color:var(--ink);
}
.cart__minimo::before{
  content:""; flex:none; width:16px; height:16px; margin-top:1px; border-radius:50%;
  background:var(--amber);
  background-image:linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
  background-size:2.5px 6px, 2.5px 2.5px;
  background-position:center 4px, center 11px;
  background-repeat:no-repeat;
}

@media (min-width:600px){
  .dishmodal{ width:min(520px,calc(100vw - 48px)); }
}
@media (min-width:900px){
  .qa summary{ font-size:18px; padding:20px var(--s-5); }
  .qa__body{ padding:0 var(--s-5) 24px; }
}

/* ---------------------------------------------------------------------------
   14. ONDE A GENTE ENTREGA
   Faixa laranja inteira, sem caixas: só hairlines e tipografia.
   --------------------------------------------------------------------------- */
.deliv{
  position:relative; overflow:hidden;
  padding-block:var(--s-8);
  color:var(--ink);
  background:linear-gradient(158deg,#FF6B2C 0%,var(--brand) 46%,#FF8B45 100%);
}
.deliv__bg{ position:absolute; inset:0; pointer-events:none; }
.deliv__bg::before{
  /* clarão suave no canto, dá profundidade sem virar mais um bloco */
  content:""; position:absolute; inset:-30% -20% auto -30%; height:120%;
  background:radial-gradient(60% 60% at 18% 12%, rgba(255,255,255,.4), transparent 70%);
}
.deliv__bg .grain{ opacity:.22; }

.deliv__inner{ position:relative; display:grid; gap:var(--s-6); }
.deliv__head h2{ font-size:clamp(30px,5.2vw,44px); margin-bottom:var(--s-3); }
.deliv__lead{
  font-size:17px; line-height:1.55; color:var(--on-brand);
  max-width:42ch; margin-bottom:var(--s-5); text-wrap:pretty;
}
.btn--light{ --btn-bg:var(--cream); --btn-fg:var(--ink); --btn-bd:var(--cream); box-shadow:var(--sh-2); }
.btn--light:hover{ --btn-bg:#fff; --btn-bd:#fff; }

/* Lista de regiões: linhas com filete, nada de card */
.regions{ display:grid; align-content:start; }
.region{
  display:grid; gap:3px;
  padding-block:var(--s-4);
  border-top:1px solid rgba(46,27,18,.2);
}
.region:last-child{ border-bottom:1px solid rgba(46,27,18,.2); }
.region__name{
  font-family:var(--f-head); font-weight:600; font-size:20px; line-height:1.15;
}
.region__list{
  font-size:15.5px; font-weight:500; line-height:1.55; color:var(--on-brand);
  text-wrap:pretty; overflow-wrap:anywhere;
}
.region__list i{ font-style:normal; color:rgba(46,27,18,.5); padding-inline:3px; }

/* Faixa de números no rodapé da seção */
.deliv__facts{
  position:relative;
  margin-top:var(--s-7); padding-top:var(--s-5);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-4) var(--s-3);
  border-top:1px solid rgba(46,27,18,.2);
}
.deliv__facts li{ display:grid; gap:1px; min-width:0; align-content:start; }
.deliv__facts b{
  font-family:var(--f-head); font-weight:600; font-size:clamp(19px,4.6vw,23px);
  line-height:1.1; text-wrap:balance;
}
.deliv__facts span{
  font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-brand); line-height:1.35;
}

@media (min-width:720px){
  .region{ grid-template-columns:minmax(130px,1fr) 2.4fr; gap:var(--s-4); align-items:baseline; }
  .deliv__facts{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-5); }
  .deliv__facts li + li{ padding-left:var(--s-5); border-left:1px solid rgba(46,27,18,.2); }
}
@media (min-width:900px){
  .deliv{ padding-block:var(--s-9); }
  .deliv__inner{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--s-7); align-items:start; }
  .deliv__head{ position:sticky; top:calc(var(--header-h) + 24px); }
}

/* ---------------------------------------------------------------------------
   15. MAIS LARANJA
   A marca é laranja: a cor sai dos botões e ganha o corpo da página.
   --------------------------------------------------------------------------- */

/* Ação principal é sempre laranja, no header e na barra do mobile */
.btn--cart{ --btn-bg:var(--brand-ink); --btn-fg:#fff; --btn-bd:var(--brand-ink); }
.btn--cart:hover{ --btn-bg:var(--brand-deep); --btn-bd:var(--brand-deep); }
.cart-count{ background:var(--cream); color:var(--brand-deep); }
.cartbar__btn{ background:var(--brand-ink); box-shadow:0 8px 24px rgba(217,58,0,.34); }
.cart-count--solid{ background:var(--cream); color:var(--brand-deep); }

/* Faixa do marquee em laranja cheio, logo abaixo do hero */
.marquee{
  background:var(--brand); color:var(--ink);
  border-block:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.marquee__track i{ color:rgba(46,27,18,.45); }

/* Como funciona sobre fundo alaranjado, com ícones sólidos */
.section--cream{ background:var(--brand-tint); }
.step__icon{ background:var(--brand-ink); border-color:var(--brand-ink); color:#fff; }

/* Preço em laranja: espalha a cor por todo o cardápio */
.price{ color:var(--brand-ink); }
.price small{ color:var(--ink-3); }

/* Dúvidas com o mesmo tom quente */
.section--faq{ background:var(--brand-tint); }
.qa summary::after{ color:var(--brand-ink); }

/* Cardápio ganha um véu laranja no topo, sem atrapalhar a leitura */
.section--menu{
  background:
    radial-gradient(120% 60% at 50% 0%, var(--brand-tint), transparent 62%),
    var(--cream);
}

/* Rodapé costurado à marca */
.footer{ border-top:4px solid var(--brand); }

/* ---------------------------------------------------------------------------
   16. ACABAMENTO TIPOGRÁFICO
   Quebra de linha equilibrada nos títulos, sem linha órfã nos parágrafos
   e medida de leitura controlada em todo texto corrido.
   --------------------------------------------------------------------------- */
h1,h2,h3,h4,.region__name,.plate__dish{ text-wrap:balance; }
p,li,summary,dd,dt,label,figcaption{ text-wrap:pretty; }

.section__head p,
.step p,
.qa__body p,
.custom .lead,
.hero__sub,
.footer__note,
.menu-empty{ max-width:60ch; }

.dish__desc,
.citem__name,
.dishmodal__desc{ text-wrap:pretty; }

/* Palavras longas (nomes de prato, e-mails colados) nunca estouram a caixa */
.dish__name,.region__list,.citem__name,.area__off,.qa summary{ overflow-wrap:anywhere; }

/* ---------------------------------------------------------------------------
   17. MESCLA DAS TRÊS CORES
   Laranja continua dominante; amarelo e verde entram em pontos escolhidos,
   como nos posts. Sempre com texto escuro por cima (nunca branco no amarelo
   nem no verde, que não alcançam 4,5:1 com branco).
   --------------------------------------------------------------------------- */

/* Selos de seção variam de cor, como as tarjas do feed */
.chapter--green{ color:var(--green-ink); background:var(--green-soft); }
.chapter--amber{ color:var(--amber-ink); background:var(--amber-soft); }

/* Ícones do "Como funciona" alternam entre as três */
.step:nth-child(2) .step__icon{ background:var(--amber); border-color:var(--amber); color:var(--ink); }
.step:nth-child(4) .step__icon{ background:var(--green); border-color:var(--green); color:var(--green-ink); }

/* Cada categoria do cardápio ganha seu tom na miniatura */
.catgroup[data-cat="aves"]   .dish__thumb{ background:linear-gradient(150deg,var(--amber-soft),#FFE3A3); color:var(--amber-ink); }
.catgroup[data-cat="peixes"] .dish__thumb{ background:linear-gradient(150deg,var(--green-soft),#DCEEBE); color:var(--green-ink); }
.catgroup[data-cat="massas"] .dish__thumb{ background:linear-gradient(150deg,#FFE9DC,var(--amber-soft)); color:var(--brand-deep); }

/* Dúvidas sobre um verde bem lavado, para a página não ficar só quente */
.section--faq{ background:var(--green-tint); }
.qa[open]{ border-color:var(--green-line); }
.qa summary:hover{ background:var(--green-tint); }

/* Terceira bolha do hero em verde: as três cores já aparecem na primeira tela */
.blob--3{ background:radial-gradient(circle at 40% 30%, #EAF5D6, var(--green)); opacity:.4; }

/* Faixa de entrega: fecha em amarelo em vez de laranja claro */
.deliv{ background:linear-gradient(158deg,var(--brand) 0%,#FC7A19 52%,var(--amber) 100%); }

/* Personalizado segue o mesmo degradê da marca */
.section--custom{
  background:
    radial-gradient(700px 400px at 12% 0%, rgba(255,255,255,.34), transparent 60%),
    linear-gradient(160deg,var(--brand) 0%, #FC7A19 50%, var(--amber) 100%);
}

/* Selo vegetariano em verde cheio: é o sinal mais útil do cardápio */
.badge{ background:var(--green); border-color:var(--green); color:var(--ink); }
.badge .ico{ color:var(--green-ink); }

/* Rodapé: filete tricolor */
.footer{
  border-top:0;
  background:
    linear-gradient(90deg,var(--brand) 0 34%,var(--amber) 34% 67%,var(--green) 67% 100%) top/100% 4px no-repeat,
    var(--ink);
}

/* ---------------------------------------------------------------------------
   18. CALLOUT DO CARDÁPIO
   Dois itens no flex (ícone + texto). Sem o span, cada nó de texto virava
   um item e o link era jogado para a coluna seguinte.
   --------------------------------------------------------------------------- */
.menu-note{
  display:flex; align-items:flex-start; gap:var(--s-3);
  margin-top:var(--s-5); padding:var(--s-4);
  background:var(--amber-soft); border:1px solid #F5DFA6;
  border-radius:var(--r-lg);
  font-size:15px; line-height:1.5; color:var(--ink);
}
.menu-note__ico{
  flex:none; display:grid; place-items:center; width:36px; height:36px;
  border-radius:12px; background:var(--amber); color:var(--ink);
}
.menu-note__ico .ico{ width:19px; height:19px; }
.menu-note__txt{ min-width:0; text-wrap:pretty; max-width:62ch; }
.menu-note a{
  font-weight:800; color:var(--brand-deep);   /* fundo amarelo pede o tom fundo */
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:2px;
}

@media (min-width:600px){
  .menu-note{ align-items:center; padding:var(--s-4) var(--s-5); font-size:15.5px; }
}

/* ---------------------------------------------------------------------------
   19. COMO VOCÊ PREFERE PEDIR
   90% dos pedidos são personalizados, então o primeiro cartão é o principal
   e os outros dois ficam visualmente subordinados.
   --------------------------------------------------------------------------- */
.paths{ background:var(--cream); padding-block:var(--s-7); }
.paths__title{ font-size:clamp(22px,5.4vw,30px); margin-bottom:var(--s-5); text-align:center; }
.paths__grid{ display:grid; gap:var(--s-3); }
.path{
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-5); box-shadow:var(--sh-1);
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.path:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.path--main{
  border:2px solid var(--brand);
  background:linear-gradient(170deg,var(--brand-tint),var(--surface) 55%);
  box-shadow:0 10px 30px rgba(247,85,6,.14);
}
.path__tag{
  font-family:var(--f-head); font-weight:600; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--brand);
  padding:5px 12px; border-radius:var(--r-pill); margin-bottom:var(--s-3);
}
.path__tag--soft{ color:var(--ink-2); background:var(--cream-2); }
.path h3{ font-size:20px; margin-bottom:6px; }
.path p{ color:var(--ink-2); font-size:15px; margin-bottom:var(--s-4); max-width:36ch; }
.path .btn{ margin-top:auto; }

/* auto-fit: com 2 ou 3 cartões visíveis o grid se ajusta sozinho,
   sem deixar coluna vazia quando os kits estão desligados */
@media (min-width:720px){
  .paths{ padding-block:var(--s-8); }
  .paths__grid{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-4); }
}

/* ---------------------------------------------------------------------------
   20. CAMPOS NOVOS DO PERSONALIZADO
   --------------------------------------------------------------------------- */
.field--pair{ display:grid; gap:var(--s-4); }
.field--pair > div{ display:grid; gap:6px; min-width:0; }
@media (min-width:560px){
  .field--pair{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--s-3); }
}

.opt{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:4px; padding:11px 13px;
  background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-sm); cursor:pointer;
  font-weight:700; font-size:14.5px; line-height:1.4;
  transition:border-color var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out);
}
.opt:hover{ border-color:var(--line-strong); }
.opt input{ width:20px; height:20px; flex:none; margin:0; accent-color:var(--brand-ink); cursor:pointer; }
.opt:has(input:checked){ background:var(--brand-tint); border-color:var(--brand); }
.opt:has(input:focus-visible){ outline:3px solid var(--brand-ink); outline-offset:2px; }

.attach{
  display:flex; gap:11px; align-items:flex-start;
  margin-bottom:var(--s-4); padding:13px 15px;
  background:var(--amber-soft); border:1px solid #F5DFA6;
  border-radius:var(--r-sm);
  font-size:14px; line-height:1.45; color:var(--ink);
}
.attach .ico{ color:var(--amber-ink); flex:none; margin-top:1px; }
.attach span{ min-width:0; text-wrap:pretty; }

/* Ícone do prato no lugar das iniciais */
.dish__ico{ width:34px; height:34px; stroke-width:1.6; }
.dishmodal__ph .dish__ico{ width:74px; height:74px; stroke-width:1.2; }

/* ---------------------------------------------------------------------------
   21. DESCOMPLIKA
   Amarelo da capa do carrossel, com tinta marrom por cima (8,3:1).
   Branco e laranja não entram como texto aqui: nenhum dos dois alcança
   contraste suficiente sobre o amarelo.
   --------------------------------------------------------------------------- */
.kits{
  position:relative; overflow:hidden;
  background:var(--amber); color:var(--ink);
  padding-block:var(--s-8);
}
/* Textura meio-tom, como nas artes do Instagram */
.kits::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(46,27,18,.16) 1.1px, transparent 1.2px);
  background-size:7px 7px;
  opacity:.55;
}
.kits::after{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:radial-gradient(55% 55% at 20% 0%, rgba(255,255,255,.4), transparent 70%);
  pointer-events:none;
}
.kits .wrap{ position:relative; z-index:2; }

/* --- shapes decorativos --- */
.kits__deco{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.dec{ position:absolute; display:block; }
.dec--f1, .dec--f2, .dec--f3{ color:#5A9E24; }
.dec--t1, .dec--t2{ color:#E8481C; }
/* Só nas faixas livres: topo acima dos cards e rodapé abaixo do aviso.
   Nas laterais o conteúdo encosta na borda a partir de 1024px. */
.dec--f1{ width:132px; height:132px; top:-30px;    left:-40px;  transform:rotate(-18deg); }
.dec--f2{ width:92px;  height:92px;  top:5%;       right:27%;   transform:rotate(128deg); opacity:.85; }
.dec--f3{ width:88px;  height:88px;  bottom:-26px; left:14%;    transform:rotate(42deg); }
.dec--t1{ width:76px;  height:76px;  top:9%;       right:7%;    opacity:.9; }
.dec--t2{ width:56px;  height:56px;  bottom:3%;    right:6%;    opacity:.85; }

@media (max-width:719px){
  .dec--f2, .dec--t1{ display:none; }
  .dec--f1{ width:96px; height:96px; }
  .dec--f3{ width:64px; height:64px; }
  .dec--t2{ width:44px; height:44px; }
}

/* --- cabeçalho --- */
.kits__head{ max-width:640px; margin-bottom:var(--s-6); }
.kits__head h2{ font-size:clamp(28px,6.4vw,44px); margin-bottom:var(--s-3); }
.kits__head h2 em{ font-style:normal; color:var(--brand-deep); }
.kits__head p{ color:var(--ink); font-size:17px; }
.kits__head strong{ font-weight:800; }

.kits__grid{ display:grid; gap:var(--s-3); }

/* --- cartão do kit --- */
.kit{
  display:flex; flex-direction:column;
  background:var(--cream); color:var(--ink);
  border-radius:var(--r-lg); padding:var(--s-5);
  box-shadow:0 10px 30px rgba(46,27,18,.16);
}
.js .kit{
  opacity:0; transform:translate3d(0,24px,0);
  transition:opacity 460ms var(--e-out), transform 460ms var(--e-back);
  transition-delay:var(--d,0ms);
}
.js .kit.is-in{ opacity:1; transform:none; }

.kit__head{ padding-bottom:var(--s-3); border-bottom:1px solid var(--line); margin-bottom:var(--s-3); }
.kit__name{ font-size:27px; font-weight:700; letter-spacing:-.02em; line-height:1.08; margin-bottom:5px; }
.kit__meta{
  font-family:var(--f-head); font-weight:400; font-size:15px;
  letter-spacing:0; text-transform:none; color:var(--ink-2);
}
.kit__meta i{ font-style:normal; color:var(--ink-3); padding-inline:2px; }

.kit__list{ display:grid; gap:7px; margin-bottom:var(--s-4); }
.kit__list li{
  position:relative; padding-left:16px;
  font-size:14px; line-height:1.4; color:var(--ink-2); text-wrap:pretty;
}
.kit__list li::before{
  content:""; position:absolute; left:0; top:7px;
  width:6px; height:6px; border-radius:50%; background:var(--green);
}

/* Preço maior e o par centralizado, para fechar o vão do meio */
.kit__foot{
  display:flex; align-items:center; justify-content:center;
  gap:var(--s-4); margin-top:auto; padding-top:var(--s-4);
  border-top:1px solid var(--line); flex-wrap:wrap;
}
.kit__foot .price{ font-size:32px; line-height:1; }
.kit__foot .price small{ font-size:12px; margin-top:4px; }

/* --- aviso --- */
.kits__note{
  display:flex; gap:11px; align-items:flex-start;
  margin-top:var(--s-5); padding:var(--s-4) var(--s-5);
  background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-lg); font-size:14.5px; line-height:1.5; color:var(--ink-2);
}
.kits__note .ico{ color:var(--brand-ink); flex:none; margin-top:2px; }
.kits__note span{ min-width:0; }
.kits__note strong{ color:var(--ink); }
.kits__note a{ color:var(--brand-ink); font-weight:800; text-underline-offset:3px; }

@media (min-width:720px){
  .kits{ padding-block:var(--s-9); }
  .kits__grid{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-4); }
}

/* ---------------------------------------------------------------------------
   22. ÍCONES EM PNG
   O PNG entra como máscara, não como imagem. Assim o desenho é pintado com
   currentColor e continua herdando a cor de cada categoria, igual aos SVG.
   --------------------------------------------------------------------------- */
.dish__ico--img{
  display:block; width:38px; height:38px;
  background-color:currentColor;
  -webkit-mask:var(--src) center / contain no-repeat;
          mask:var(--src) center / contain no-repeat;
}
.dishmodal__ph .dish__ico--img{ width:88px; height:88px; }

/* ---------------------------------------------------------------------------
   23. LOGO DA MARCA
   O arquivo é uma máscara com canal alfa, não uma imagem colorida. Assim o
   mesmo PNG serve laranja no header e branco no rodapé, sem precisar de dois
   arquivos nem de fundo recortado.
   --------------------------------------------------------------------------- */
.logo{ display:inline-flex; align-items:center; margin-right:auto; text-decoration:none; }
.logo__img{
  display:block; width:76px; height:47px;
  background-color:var(--brand-ink);
  -webkit-mask:url('logo.png') left center / contain no-repeat;
          mask:url('logo.png') left center / contain no-repeat;
  transition:background-color var(--t-base) var(--e-out);
}
.logo:hover .logo__img{ background-color:var(--brand-deep); }
.logo__img--footer{
  width:118px; height:73px; flex:none;
  background-color:var(--cream);
}
@media (min-width:900px){
  .logo__img{ width:88px; height:54px; }
}

/* ---------------------------------------------------------------------------
   24. FAIXA DE ENTREGA
   Laranja original da marca, texto branco e as linhas em filete, como antes.
   O que mudou aqui foi só o alinhamento das colunas e a centralização da
   faixa de números.
   --------------------------------------------------------------------------- */
.deliv{
  --on-brand:#fff;
  color:#fff;
  background:linear-gradient(158deg,var(--brand) 0%,#FC7A19 52%,var(--amber) 100%);
}
/* realce quente longe do título, para não clarear onde o texto está */
.deliv::after{
  background:radial-gradient(60% 60% at 78% 100%, rgba(255,255,255,.16), transparent 70%);
}
.deliv__head h2{ color:#fff; }
.deliv__lead{ color:#fff; font-size:17px; font-weight:400; max-width:42ch; }

/* --- passos em linhas com filete, sem caixa --- */
.regions{ display:grid; align-content:start; }
.region{
  display:grid; gap:3px;
  padding-block:var(--s-4); padding-inline:0;
  background:none; border-radius:0;
  border-top:1px solid rgba(255,255,255,.3);
}
.region:last-child{ border-bottom:1px solid rgba(255,255,255,.3); }
.region__name{ color:#fff; font-size:22px; }
.region__list{ color:#fff; font-weight:500; font-size:16.5px; }
.region__list i{ color:rgba(255,255,255,.5); }

/* --- números centralizados na seção, sem cartão --- */
.deliv__facts{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  /* o vão entre os itens é o que espalha o grupo na largura da seção */
  gap:var(--s-5) clamp(28px,7vw,104px); text-align:center;
  margin-top:var(--s-7); padding:var(--s-6) 0 0;
  background:none; border:0; border-top:1px solid rgba(255,255,255,.3);
  border-radius:0;
}
.deliv__facts li{ display:grid; gap:2px; min-width:0; }
.deliv__facts b{ color:#fff; font-weight:600; font-size:clamp(21px,5vw,26px); }
.deliv__facts span{ color:#fff; font-weight:500; letter-spacing:.09em; font-size:12.5px; }
.deliv__facts li + li{ border-left:0; padding-left:0; }

/* --- selo e botões --- */
.deliv .chapter--light{ background:var(--ink); color:var(--amber); }
.deliv .btn--light{ --btn-fg:var(--green-ink); }
.deliv .btn--light .ico{ color:var(--green-ink); }
#waLink{ color:var(--green); }
#waLink:hover{ color:var(--ink); }

@media (min-width:720px){
  .region{ grid-template-columns:minmax(130px,1fr) 2.4fr; gap:var(--s-4); align-items:baseline; }
  .deliv__facts li + li{ padding-left:clamp(28px,7vw,104px); border-left:1px solid rgba(255,255,255,.3); }
}
@media (min-width:900px){
  /* colunas centradas uma na outra. A margem inferior do cabeçalho sai,
     senão ela desloca o centro no layout de duas colunas. */
  .deliv__inner{
    align-items:center;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.32fr);
    gap:var(--s-6);
  }
  .deliv__head{ position:static; margin-bottom:0; }
}

/* Respiro entre parágrafos dentro de uma resposta, como o modo de preparo */
.qa__body p + p{ margin-top:10px; }

/* ---------------------------------------------------------------------------
   25. A EMBALAGEM
   Primeira foto real do produto no site. O fundo cinza do estúdio pede uma
   moldura: o cartão arredondado isola a foto do creme da página.
   --------------------------------------------------------------------------- */
.pack{ background:var(--cream); }
.pack__inner{ display:grid; gap:var(--s-5); align-items:center; }

.pack__foto{ margin:0; }
.pack__foto img{
  display:block; width:100%; height:auto;
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
.pack__foto figcaption{
  margin-top:var(--s-3); font-size:13.5px; font-weight:700;
  color:var(--brand-ink); text-align:center;
}

.pack__texto h2{ font-size:clamp(26px,6vw,38px); margin-bottom:var(--s-3); }
.pack__texto h2 em{ font-style:normal; color:var(--brand-ink); }
.pack__texto > p{ color:var(--ink-2); font-size:17px; margin-bottom:var(--s-4); max-width:44ch; }

.pack__list{ display:grid; gap:11px; font-weight:700; font-size:15.5px; }
.pack__list li{ display:flex; gap:9px; align-items:flex-start; }
.pack__list .ico{ width:19px; height:19px; stroke-width:2.6; flex:none; margin-top:2px; color:var(--green-ink); }

@media (min-width:760px){
  .pack__inner{ grid-template-columns:minmax(0,.95fr) minmax(0,1fr); gap:var(--s-7); }
  .pack__foto figcaption{ text-align:left; }
}