/* Café Nobre — visual do site "Balcão". Paleta "Azul porcelana" (escolhida pelo usuário em 6/11/2026, no estilo da Apple):
   fundo branco, cinza claro nas superfícies (tarjetas, barras, busca, topo da janela do produto), preto nas ações e nos blocos
   (entrada da página, Clube, pedido em curso) e uma única cor, o azul porcelana: celeste como detalhe sobre o preto e azul
   em "Café" do logo, preços de oferta e links. Sem bege, sem marrom e sem violeta.
   As cores literais ficam só na referência abaixo (e nos dois temas escuros): para mudar a paleta, basta mexer nelas.
   Títulos e texto em Lexend; o logo em texto segue em serifa itálica.
   Os componentes comuns (carrinho, checkout, janelas) vêm de motor/assets/css/site-base.css e ficam sempre claros:
   por isso as variáveis do motor (--ink, --muted, --line...) não mudam no escuro; as seções da página usam --bg, --text etc. */
:root {
  /* referência (fixa nos dois temas): as janelas são sempre claras e usam estas */
  --sand: #ececef;       /* cinza: superfícies grandes */
  --sand-deep: #e2e2e7;  /* hover do cinza */
  --sand-soft: #f5f5f7;  /* tarjetas, barras e busca */
  --sand-line: #e3e3e8;  /* linhas e contornos */
  --warm: #efeff2;       /* pílulas neutras */
  --warm-ink: var(--sub-sand);
  --celeste: #8fb3ff;    /* azul claro: detalhe sobre o preto (9:1) e botão Ver cardápio */
  --celeste-h: #adc8ff;
  --preto: #141414;      /* botões, escolhas e blocos */
  --preto-h: #000;
  --preto-d: #262626;    /* fim do degradê do Clube */
  --azul: #1d4ed8;       /* azul porcelana: "Café" do logo, preço de oferta e links (6,7:1 no branco, 6,1:1 no cinza) */
  --azul-claro: #eef3ff; /* etiquetas e avisos */
  --noite: #141414;      /* texto */
  --sub-sand: #5e5e66;   /* texto secundário sobre o cinza (5,9:1) */

  /* motor (componentes comuns). O motor põe --orange e derivados de brand.color direto no <html>: aqui o site usa a celeste da paleta */
  --orange: var(--celeste) !important;
  --orange-2: var(--celeste-h) !important;
  --orange-d: var(--preto) !important; /* o motor usa em textos e links sobre claro */
  --orange-soft: var(--sand-soft) !important;
  --cream: var(--sand-soft);
  --red: #141414;     /* ofertas: preto, como o resto (sem vermelho) */
  --black: var(--noite);
  --ink: var(--noite);
  --muted: #636369;
  --paper: var(--sand-soft);
  --line: rgba(20, 20, 20, .12);
  --white: #fff;

  --f-display: 'Lexend', system-ui, sans-serif;
  --f-script: 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Lexend', system-ui, sans-serif;

  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 16px 30px -22px rgba(20, 20, 20, .3);
  --nav-h: 72px;

  /* papéis da página (mudam com o tema) */
  --bg: #fff;
  --surface: #fff;
  --block: var(--preto);
  --block-ink: #fff;
  --block-sub: #c7c7cc;
  --block-acc: var(--celeste);
  --glass: rgba(255, 255, 255, .08); /* botões da mesa sobre o bloco preto */
  --glass-h: rgba(255, 255, 255, .14);
  --pires: var(--sand-soft);
  --text: var(--noite);
  --tmuted: var(--muted);
  --acc: var(--azul);
  --hair: var(--sand-line);
  --btn: var(--preto);
  --btn-h: var(--preto-h);
  --btn-ink: #fff;
  --cartb: var(--preto);
  --cartb-ink: #fff;
  --badge: var(--celeste);
  --badge-ink: var(--noite);
  --pill: var(--warm);
  --pill-ink: var(--warm-ink);
  --uon: var(--celeste);
  --uon-ink: var(--preto);
  --uon-sub: #3a3a40;
  --uon-acc: var(--preto);
  --diet: var(--warm-ink);
  --diet-line: var(--sand-line);
  --card: var(--sand-soft);
  --card-sh: none;
  --plate: #fff;
  --plate-sh: 0 12px 22px -12px rgba(20, 20, 20, .3);
  --chip: #fff;
  --chip-ink: var(--preto);
  --qty: var(--sand);
  --qty-b: #fff;
  --qty-ink: var(--noite);
  --club: var(--preto);
  --club-ink: #fff;
  --club-sub: rgba(255, 255, 255, .85);
  --club-pill: rgba(255, 255, 255, .12);
  --club-acc: var(--celeste);
  --hot: var(--red);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0b0b0c; --surface: #1c1c1e; --block: #1c1c1e; --block-ink: #f5f5f7; --block-sub: #c7c7cc; --block-acc: var(--celeste); --glass: rgba(255, 255, 255, .06); --glass-h: rgba(255, 255, 255, .1); --pires: #1c1c1e; --text: #f5f5f7; --tmuted: #a1a1a6; --acc: var(--celeste); --hair: rgba(255, 255, 255, .09); --btn: var(--sand); --btn-h: var(--sand-deep); --btn-ink: var(--noite); --cartb: var(--sand); --cartb-ink: var(--noite); --badge: var(--celeste); --badge-ink: var(--noite); --pill: rgba(255, 255, 255, .07); --pill-ink: #d1d1d6; --uon: var(--sand); --uon-ink: var(--noite); --uon-sub: var(--sub-sand); --uon-acc: var(--noite); --diet: #d1d1d6; --diet-line: rgba(255, 255, 255, .14); --card: #1c1c1e; --card-sh: 0 20px 34px -24px rgba(0, 0, 0, .8); --plate: var(--sand-soft); --plate-sh: 0 14px 22px -16px rgba(0, 0, 0, .7); --chip: rgba(143, 179, 255, .16); --chip-ink: #b8cdff; --qty: #2c2c2e; --qty-b: #3a3a3c; --qty-ink: #f5f5f7; --club: #1c1c1e; --club-ink: #f5f5f7; --club-sub: rgba(255, 255, 255, .8); --club-pill: rgba(255, 255, 255, .1); --club-acc: var(--celeste); --hot: var(--celeste); color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0b0b0c; --surface: #1c1c1e; --block: #1c1c1e; --block-ink: #f5f5f7; --block-sub: #c7c7cc; --block-acc: var(--celeste); --glass: rgba(255, 255, 255, .06); --glass-h: rgba(255, 255, 255, .1); --pires: #1c1c1e; --text: #f5f5f7; --tmuted: #a1a1a6; --acc: var(--celeste); --hair: rgba(255, 255, 255, .09); --btn: var(--sand); --btn-h: var(--sand-deep); --btn-ink: var(--noite); --cartb: var(--sand); --cartb-ink: var(--noite); --badge: var(--celeste); --badge-ink: var(--noite); --pill: rgba(255, 255, 255, .07); --pill-ink: #d1d1d6; --uon: var(--sand); --uon-ink: var(--noite); --uon-sub: var(--sub-sand); --uon-acc: var(--noite); --diet: #d1d1d6; --diet-line: rgba(255, 255, 255, .14); --card: #1c1c1e; --card-sh: 0 20px 34px -24px rgba(0, 0, 0, .8); --plate: var(--sand-soft); --plate-sh: 0 14px 22px -16px rgba(0, 0, 0, .7); --chip: rgba(143, 179, 255, .16); --chip-ink: #b8cdff; --qty: #2c2c2e; --qty-b: #3a3a3c; --qty-ink: #f5f5f7; --club: #1c1c1e; --club-ink: #f5f5f7; --club-sub: rgba(255, 255, 255, .8); --club-pill: rgba(255, 255, 255, .1); --club-acc: var(--celeste); --hot: var(--celeste); color-scheme: dark; }

body { background: var(--bg); color: var(--text); font-weight: 400; line-height: 1.6; }
b, strong { font-weight: 600; }
main .muted, .footer .muted { color: var(--tmuted); }
h1, h2, h3 { letter-spacing: -.02em; text-wrap: balance; }
main section[id] { scroll-margin-top: var(--nav-h); }
.cqty button, .cat, .item-open { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) { .item .item-img img, .deal-img img, .cqty button { transition: none; } .item-open:hover .item-img img, .deal-img:hover img { transform: none; } }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* Botões: preto com texto branco (no tema escuro, cinza claro com texto escuro) */
::selection { background: var(--celeste); color: var(--noite); }
.btn { font-weight: 500; }
.btn-orange { background: var(--preto); color: #fff; box-shadow: none; }
.btn-orange:hover { background: var(--preto-h); }
.btn-orange:focus-visible, .unit-btn:focus-visible, .unit-go:focus-visible, .ub-btn:focus-visible, .unit-opt:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }
main .btn-orange { background: var(--btn); color: var(--btn-ink); }
main .btn-orange:hover { background: var(--btn-h); }
.btn-line { background: transparent; color: var(--text); border: 1.5px solid currentColor; }
.btn-line:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.dot { background: #3fae6d; box-shadow: 0 0 0 4px rgba(63, 174, 109, .22); }
.mo-num { color: var(--preto); }
.mo-live .mo-num { color: var(--celeste); }
.tr-num { color: var(--preto); }
.item-add { background: var(--preto); color: #fff; }

.hero-title, .deals-head h2, .menu-title, .sec-title, .club h2, .rband h2, .unit header b, .cat-block h3, .mh-title { font-family: var(--f-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }

/* ---------- Navegação (branca, linha fina ao rolar) ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; background: var(--bg); color: var(--text); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.solid { border-color: var(--hair); }
.nav-in { max-width: 1248px; margin: 0 auto; height: var(--nav-h); padding: 0 24px; display: flex; align-items: center; gap: 24px; }
.nav-logo { text-decoration: none; color: inherit; }
/* Logo em texto: "Café" em azul (celeste no escuro), "Nobre" na cor do texto, serifa itálica */
.wordmark { display: inline-flex; align-items: baseline; gap: .2em; font-family: var(--f-script); font-style: italic; font-size: 32px; line-height: 1; white-space: nowrap; color: inherit; letter-spacing: 0; }
.wordmark b { font-weight: 600; }
.wordmark b:first-child:not(:last-child) { color: var(--acc); }
.nav-links { margin: 0 auto; display: flex; gap: 28px; }
.nav-links a { color: inherit; text-decoration: none; font-size: 14px; font-weight: 400; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { border-color: var(--acc); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-theme, .nav-orders, .nav-call { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair); background: transparent; color: inherit; border-radius: 999px; padding: 9px 15px; font-weight: 500; font-size: 13.5px; }
.nav-theme { width: 40px; height: 40px; padding: 0; justify-content: center; }
.nav-theme svg { width: 18px; height: 18px; }
.nav-theme .moon { display: none; }
:root[data-theme="dark"] .nav-theme .sun { display: none; }
:root[data-theme="dark"] .nav-theme .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-theme .sun { display: none; }
  :root:not([data-theme="light"]) .nav-theme .moon { display: block; }
}
.nav-theme:hover, .nav-orders:hover, .nav-call:hover { border-color: var(--text); }
.nav-call.on { border-color: var(--acc); color: var(--acc); animation: callPulse 1.6s infinite; }
.nav-cart { position: relative; display: inline-flex; align-items: center; gap: 10px; background: var(--cartb); color: var(--cartb-ink); border: 0; border-radius: 999px; padding: 8px 8px 8px 18px; font-weight: 500; font-size: 14px; }
.nav-cart .badge { min-width: 26px; height: 26px; border-radius: 999px; background: var(--badge); color: var(--badge-ink); font-size: 12.5px; font-weight: 600; display: inline-grid; place-items: center; padding: 0 7px; }
.nav-cart.bump { animation: bump .4s ease; }

/* ---------- Hero: bloco cinza com o café dinamarquês ---------- */
/* Unidades: dois cartões brancos "Pedir do …" sobre o bloco preto; a escolhida fica celeste */
/* Modo mesa (QR): sem hero, direto ao cardápio */
body.mesa-mode .hero, body.mesa-mode .hide-mesa { display: none !important; }
body.mesa-mode .show-mesa { display: inline-flex !important; }

/* Entrada da mesa (QR) */
.mhero { background: var(--block); color: var(--block-ink); padding: calc(var(--nav-h) + 26px) 0 30px; border-radius: 0 0 28px 28px; }
.mhero-in { max-width: 760px; }
.mh-kicker { margin: 0 0 8px; display: flex; align-items: center; gap: 10px; font-size: 13px; opacity: .75; }
.mh-title { margin: 0; display: flex; align-items: baseline; gap: 14px; font-weight: 300; font-size: clamp(40px, 6vw, 60px); }
.mh-title b { font-weight: 700; color: var(--block-acc); }
.mh-sub { margin: 12px 0 22px; opacity: .75; font-size: 15px; max-width: 460px; }
.mh-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mh-act { display: flex; align-items: center; gap: 12px; text-align: left; text-decoration: none; color: inherit; background: var(--glass); border: 1px solid transparent; border-radius: 18px; padding: 14px; font: inherit; transition: background-color .15s; }
.mh-act:hover { background: var(--glass-h); }
.mh-act > .ic { width: 22px; height: 22px; color: var(--block-acc); }
.mh-act span { display: grid; min-width: 0; }
.mh-act b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.mh-act small { font-size: 12px; opacity: .8; line-height: 1.3; }
.mh-act.go { grid-column: 1 / -1; background: var(--uon); border-color: var(--uon); color: var(--uon-ink); padding: 16px 18px; }
.mh-act.go > .ic { color: var(--uon-acc); }
.mh-act.go > .ic:last-child { margin-left: auto; }
.mh-act.go b { font-size: 17px; }
.mh-act.go small { opacity: .75; }
.mh-act.on { border-color: var(--block-acc); background: var(--glass-h); animation: callPulse 1.6s infinite; }
.mh-orders { display: grid; gap: 8px; margin-top: 12px; }
.mh-orders:empty { display: none; }
.mh-order { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 16px; background: #fff; color: var(--ink); padding: 12px 14px; font: inherit; font-size: 14px; text-align: left; }
.mh-order b { font-weight: 700; font-size: 18px; color: var(--preto); }
.mh-order span { flex: 1; font-weight: 500; }
.mh-order.pronto { background: #e3f1e8; }

/* ---------- Contador do cartão: + preto; com o item no pedido vira − n + numa pílula cinza claro ---------- */
.cqty { display: inline-flex; align-items: center; flex: none; border-radius: 999px; }
.cqty button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--btn); color: var(--btn-ink); display: grid; place-items: center; box-shadow: 0 8px 14px -8px rgba(20, 20, 20, .45); transition: transform .12s; }
.cqty button:active { transform: scale(.9); }
.cqty button:disabled { background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.cqty .ic { width: 18px; height: 18px; }
.cqty.on { background: var(--qty); padding: 3px; gap: 2px; box-shadow: 0 8px 14px -8px rgba(20, 20, 20, .45); }
.cqty.on button { width: 32px; height: 32px; background: var(--qty-b); color: var(--qty-ink); box-shadow: none; }
.cqty.on .ic { width: 15px; height: 15px; }
.cqty.on b { min-width: 22px; text-align: center; font-size: 14px; font-weight: 600; color: var(--qty-ink); font-variant-numeric: tabular-nums; }

/* Cartão branco com a foto num prato cinza redondo que sai do topo */

/* ---------- Destaques (carrossel com os mesmos cartões) ---------- */
.deals { padding: 56px 0 8px; }
.deals-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.deals-head h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); }
.deals-head p.muted { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.deals-nav { display: flex; gap: 8px; }
.deals-nav .icon-btn { background: transparent; color: var(--text); border: 1px solid var(--hair); }
.deals-nav .icon-btn:hover { border-color: var(--text); }
.deals-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 64px max(24px, calc((100vw - 1152px) / 2)) 18px; scroll-padding-inline: max(24px, calc((100vw - 1152px) / 2)); scrollbar-width: none; }
.deals-row::-webkit-scrollbar { display: none; }
.deal { position: relative; flex: 0 0 232px; scroll-snap-align: start; background: var(--card); color: var(--text); border-radius: 26px; display: flex; flex-direction: column; padding: 0 16px 16px; box-shadow: var(--card-sh); }
.deal-img { position: relative; display: block; flex: none; align-self: center; width: 132px; height: 132px; margin-top: -54px; border: 0; padding: 0; border-radius: 50%; background: var(--plate); box-shadow: var(--plate-sh); }
.deal-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 14%; object-fit: contain; border-radius: 50%; transition: transform .3s ease; }
.deal-img:hover img { transform: scale(1.06) rotate(-4deg); }
.deal-img.ph img { padding: 28%; opacity: .55; }
.deal-img.photo img { padding: 0; object-fit: cover; }
.deal-off { position: absolute; top: 2px; left: -14px; z-index: 1; background: var(--red); color: #fff; font-weight: 600; font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.deal-tag { display: none; }
.deal-timer { position: absolute; z-index: 1; left: 50%; bottom: -10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; background: var(--noite); color: #fff; font-size: 11px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.deal-timer > span { display: none; }
.deal-timer .ic { width: 12px; height: 12px; color: var(--celeste); }
.deal-timer b { font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 500; }
.deal-body { display: flex; flex-direction: column; flex: 1; margin-top: 16px; }
.deal-body h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.deal-body p { margin: 6px 0 14px; color: var(--tmuted); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.deal-foot .item-price b { font-size: 18px; font-weight: 600; color: var(--text); }
.deal-foot .item-price s, .item .item-price s { color: var(--tmuted); }
.deal .promo-p, .item .promo-p { color: var(--acc); }
.deal.soldout .deal-img img { filter: grayscale(1); opacity: .5; }
.combo-tag { display: inline-block; background: var(--preto); color: #fff; font-size: 22px; font-weight: 600; padding: 2px 22px 4px; border-radius: 999px; margin: 10px 0 12px; }

/* ---------- Cardápio ---------- */
.menu { padding: 48px 0 40px; }
.menu-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.menu-title { margin: 0; font-size: clamp(36px, 4.4vw, 56px); }
.menu-head p.muted { margin: 10px 0 0; font-size: 14px; max-width: 520px; }
/* "Pedindo do …": linha inteira embaixo do título; sem unidade fica cinza, chamando para escolher */
.unit-bar { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 22px; background: var(--pires); color: var(--text); }
.unit-bar:empty { display: none; }
.ub-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--noite); }
.ub-ic .ic { width: 19px; height: 19px; }
.ub-t { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ub-t small { font-size: 11.5px; color: var(--tmuted); }
.ub-t b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-t em { font-style: normal; font-size: 12.5px; color: var(--tmuted); display: inline-flex; align-items: center; gap: 6px; }
.ub-btn { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font: inherit; font-size: 13.5px; font-weight: 500; }
.ub-btn:hover { background: var(--btn-h); }
.unit-bar.none { background: var(--block); color: var(--block-ink); }
.unit-bar.none .ub-ic, .unit-bar.none .ub-btn { background: var(--btn); color: var(--btn-ink); }
.unit-bar.none .ub-t small, .unit-bar.none .ub-t em { color: var(--block-sub); }
/* Janela "De qual unidade você quer pedir?" (sempre clara) */
.unit-card { padding: 28px 24px 24px; width: min(480px, 100%); }
.unit-card h3 { margin: 0; padding-right: 40px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.unit-card .fine { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; text-align: left; }
.unit-opts { display: grid; gap: 10px; margin-top: 18px; }
.unit-opt { display: grid; gap: 3px; text-align: left; border: 1.5px solid var(--sand-line); border-radius: 20px; padding: 14px 16px; background: #fff; color: var(--ink); font: inherit; transition: border-color .15s, background-color .15s; }
.unit-opt:hover { border-color: var(--sand); background: var(--sand-soft); }
.unit-opt.on { border-color: var(--preto); background: var(--sand-soft); }
.uo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.uo-top b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.uo-tag { flex: none; background: var(--sand); color: var(--noite); font-size: 11.5px; font-weight: 500; padding: 2px 10px; border-radius: 999px; }
.unit-opt small { font-size: 13px; color: var(--muted); line-height: 1.4; }
.uo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12.5px; font-weight: 500; }
.uo-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.uo-res { display: inline-flex; align-items: center; gap: 5px; color: var(--preto); }
.uo-res .ic { width: 14px; height: 14px; }
/* Busca: pílula clara com o ícone num círculo cinza à direita */
.search { display: flex; align-items: center; gap: 10px; background: var(--pill); border: 1.5px solid transparent; border-radius: 999px; padding: 5px 5px 5px 22px; min-width: min(360px, 100%); color: var(--tmuted); }
.search:focus-within { border-color: var(--acc); background: var(--surface); }
.search .ic-wrap { order: 2; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--sand); color: var(--noite); display: grid; place-items: center; }
.search .ic-wrap svg { width: 18px; height: 18px; }
.search input { order: 1; border: 0; outline: 0; padding: 8px 0; width: 100%; background: transparent; color: var(--text); font: inherit; font-weight: 400; }
/* Categorias: pílulas; a ativa em preto */
.cats { position: sticky; top: var(--nav-h); z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 12px max(24px, calc((100vw - 1152px) / 2)); background: var(--bg); scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--pill); border-radius: 999px; padding: 10px 18px; font-weight: 400; font-size: 14px; white-space: nowrap; color: var(--pill-ink); transition: background-color .15s, color .15s; }
.cat:hover { color: var(--text); }
.cat.on { background: var(--btn); color: var(--btn-ink); font-weight: 500; }
.cat small { font-size: 11.5px; font-weight: 500; opacity: .85; }
.cat.hot { color: var(--hot); }
.cat.hot .ic { width: 15px; height: 15px; }
.cat.hot.on { background: var(--red); color: #fff; }
.cat-block { padding-top: 14px; }
.cat-block h3 { font-size: 22px; margin: 0; display: flex; align-items: baseline; gap: 10px; }
.cat-block h3 small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--tmuted); }
/* Cartões: foto num prato branco que sai do topo, nome grande, selo, descrição curta, preço e + branco */
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 76px 18px; padding: 72px 0 8px; }
.item { position: relative; display: flex; flex-direction: column; background: var(--card); color: var(--text); border-radius: 26px; box-shadow: var(--card-sh); }
.item-open { display: flex; flex-direction: column; flex: 1; align-items: stretch; text-align: left; border: 0; padding: 0 16px 14px; background: transparent; color: inherit; font: inherit; }
.item-media { display: contents; }
.item .item-img { position: relative; display: block; flex: none; align-self: center; width: 136px; height: 136px; margin-top: -58px; border-radius: 50%; background: var(--plate); overflow: hidden; box-shadow: var(--plate-sh); }
.item .item-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 14%; object-fit: contain; transition: transform .3s ease; }
.item-open:hover .item-img img { transform: scale(1.06) rotate(-4deg); }
.item .item-img.ph img { padding: 28%; opacity: .55; }
.item .item-img.photo img { padding: 0; object-fit: cover; }
.item-name { order: 1; display: block; margin-top: 16px; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.item-media .chip { order: 2; align-self: flex-start; margin-top: 8px; background: var(--chip); color: var(--chip-ink); font-size: 11.5px; font-weight: 500; padding: 3px 11px; border-radius: 999px; }
.item-diet { order: 3; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.item-diet i { font-style: normal; font-size: 11px; font-weight: 500; line-height: 1.6; color: var(--pill-ink); background: var(--pill); border-radius: 999px; padding: 0 9px; }
.item-desc { order: 4; margin-top: 8px; color: var(--tmuted); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-media .off { position: absolute; top: -50px; left: 14px; z-index: 1; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.item-media .cd { position: absolute; top: 70px; left: 50%; z-index: 1; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; background: var(--noite); color: #fff; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-media .cd .ic { width: 11px; height: 11px; color: var(--celeste); }
.item-foot { margin-top: auto; padding: 0 14px 16px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.item-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.item-foot .item-price b { font-size: 18px; font-weight: 600; color: var(--text); }
.item.soldout .item-open { opacity: .45; }
.item.soldout .item-foot .item-price b { color: var(--red); font-size: 14px; }
.sec-title { font-size: clamp(30px, 3.6vw, 44px); margin: 0 0 24px; }

/* ---------- Janela do produto: topo cinza e o prato branco saindo pela borda (sempre clara) ---------- */
/* Janelas, carrinho e checkout são sempre claros: não herdam a cor do texto do tema escuro */
.modal-card, .drawer, .sheet { color: var(--ink); color-scheme: light; }
#itemModal .modal-card { border-radius: 32px; }
#itemModal .modal-close { background: rgba(255, 255, 255, .8); color: var(--noite); border: 0; }
.im-hero { position: relative; display: block; height: 220px; margin-bottom: 76px; overflow: visible; border-radius: 32px 32px 40px 40px; background: var(--sand); }
.im-hero::before { content: ""; position: absolute; inset: auto; left: 50%; top: 52px; width: 236px; height: 236px; transform: translateX(-50%); border-radius: 50%; background: #fff; box-shadow: 0 22px 34px -18px rgba(20, 20, 20, .4); }
.im-hero img { position: absolute; left: 50%; top: 52px; width: 236px; height: 236px; max-height: none; padding: 30px; transform: translateX(-50%); object-fit: contain; filter: none; }
.im-hero.ph img { padding: 70px; opacity: .55; }
.im-hero.photo img { padding: 0; border-radius: 50%; object-fit: cover; }
.im-off { left: 18px; top: 18px; bottom: auto; background: var(--red); }
/* Conteúdo: selos em cima, nome com o preço ao lado, opções em pílulas, "Sobre" e observação no fim */
.im-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 0 26px 8px; }
.im-body > * { order: 3; flex: 0 0 100%; }
.im-body > .item-diet { order: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.im-body .item-diet i { font-style: normal; font-size: 12px; font-weight: 500; line-height: 1.6; color: var(--preto); background: var(--azul-claro); border-radius: 999px; padding: 2px 11px; }
.im-body > h3 { order: 1; flex: 1 1 0; min-width: 0; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.im-body > .im-price { order: 2; flex: none; margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--sand-soft); font-size: 14px; font-weight: 600; }
.im-price b { color: var(--noite); font-weight: 600; }
.im-body > .extra { flex: none; }
.im-body > p { order: 4; margin: 20px 0 0; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.55; }
.im-body > p::before { content: "Sobre"; display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; font-weight: 600; }
.im-body > .opt-title:nth-last-child(2), .im-body > .field { order: 5; }
.opt-title { font-weight: 600; font-size: 15px; margin: 20px 0 10px; }
/* Opções em pílulas: a escolhida fica preta */
.extra { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--warm); color: var(--warm-ink); font-size: 13px; transition: background-color .15s, color .15s; }
.extra input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.extra span { flex: none; }
.extra b { font-weight: 600; color: inherit; }
.extra:has(input:checked) { background: var(--preto); color: #fff; }
.extra:has(input:focus-visible) { outline: 2px solid var(--preto); outline-offset: 2px; }
.im-foot { border-top: 0; align-items: center; padding-top: 12px; }
.im-foot .stepper { border-radius: 999px; border: 1.5px solid var(--sand-line); height: 52px; }
.im-foot .stepper button { background: transparent; height: 48px; color: var(--preto); }
.im-foot .btn { height: 56px; border-radius: 999px; font-size: 16px; }

/* Carrinho e checkout: claros, sem as barras pretas do motor */
.line-img { background: var(--sand-soft); }
.sh-top { background: #fff; color: var(--ink); border-bottom: 1px solid var(--sand-line); }
.sh-top .icon-btn { background: var(--warm); color: var(--ink); }
.note.info { background: var(--azul-claro); color: var(--preto); }
.blk-h .n, .opt > [data-ic] { background: var(--sand); color: var(--noite); }
.opt.on { border-color: var(--preto); background: var(--sand-soft); }
.cart-fab { background: var(--preto); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25), 0 18px 40px -12px rgba(20, 20, 20, .55); }
.drawer .qty, .drawer .stepper { background: var(--warm); }
.qty button .ic { width: 14px; height: 14px; }
/* Pagar segue a paleta; só a tela simulada do Mercado Pago continua azul */
.btn-mp:not([data-approve]) { background: var(--preto); }
.btn-mp:not([data-approve]):hover { background: var(--preto-h); }
.mp-secure b { color: var(--preto); }
.ck-club { background: var(--azul-claro); color: var(--preto); }
.cl-rule .ic { color: var(--preto); }
.cl-list i { color: var(--celeste); }
.res-avail.ok { color: #157a47; }
.res-avail.few { color: #8f5b00; }
/* Avisos e neutros do motor entram na paleta: sem texto marrom nem cinza de outra família */
.note { color: var(--noite); }
.ck-club.off, .cl-none { background: var(--warm); color: var(--warm-ink); }
.icon-btn, .rv-back, .stepper button, .qty { background: var(--warm); }
.icon-btn:hover, .rv-back:hover { background: var(--sand); }
.rv-steps li::before { background: var(--sand); }
.dr-head, .dr-foot, .line, .mo-row, .quote-stats div, .quote-foot { border-color: var(--sand-line); }
.quote-foot, .copy input { background: var(--sand-soft); }
.opt:hover { border-color: var(--sand-deep); }
.opt.on:hover { border-color: var(--preto); }
.cp-in input, .cl-demo { background: #fff; }
.modal-card { scrollbar-width: thin; scrollbar-color: var(--sand-line) transparent; }
/* Botões escuros do motor no preto da paleta; Aplicar cupom é secundário, em cinza claro */
.btn-dark { background: var(--preto); }
.btn-dark:hover { background: var(--preto-h); }
.cp-in .btn-dark { background: var(--sand); color: var(--noite); }
.cp-in .btn-dark:hover { background: var(--sand-deep); }
.mo-fav .item-add { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
/* Pedido em andamento: bloco preto, igual ao Clube */
.mo-live { background: var(--preto); }
.mo-live small, .mo-eta small { color: rgba(255, 255, 255, .82); }
.mo-live .btn-orange { background: var(--celeste); color: var(--noite); }
.mo-live .btn-orange:hover { background: var(--orange-2); }
.mo-prog li { color: rgba(255, 255, 255, .75); }
.mo-prog .bul { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }
.mo-prog .now .bul { color: var(--preto); }
.step.done .bul { background: var(--preto); color: var(--celeste); }
.step.done::before { background: var(--preto); }

/* Acompanhar pedido: cabeçalho cinza, sem a marca-d'água do motor */
.tr-head { background: var(--sand); color: var(--noite); }
.tr-head::after, .mo-live::after { display: none; }
.tr-head p, .tr-eta small { color: var(--sub-sand); }
.step .bul { background: var(--warm); color: var(--warm-ink); }
.step b { color: var(--warm-ink); }

/* ---------- Clube Nobre (bloco preto com detalhes em celeste) ---------- */
.club { padding: 40px 0 16px; }
.club-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: 32px; padding: 48px 52px; border-radius: 32px; background: var(--club); color: var(--club-ink); }
.club h2 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); max-width: 15ch; }
.club-copy > p { margin: 14px 0 0; color: var(--club-sub); max-width: 500px; font-size: 15px; }
.club-copy > p b { color: var(--club-acc); }
.club-pills { list-style: none; margin: 18px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.club-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--club-pill); font-size: 12.5px; color: var(--club-sub); }
.club-pills b { font-weight: 600; color: var(--club-ink); }
.club-pills i { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--club-acc); color: var(--noite); }
.club-pills svg { width: 14px; height: 14px; }
.club-act { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
main .club .btn-orange { background: var(--club-acc); color: var(--noite); }
main .club .btn-orange:hover { background: var(--celeste-h); }
.club-act .btn svg { width: 18px; height: 18px; }
.club-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--club-sub); }
.club-hint.prize { color: var(--club-acc); font-weight: 600; }
.club-hint svg { width: 17px; height: 17px; }
.club-stack { position: relative; height: 280px; cursor: pointer; }
.club-stack .fcard { position: absolute; left: 50%; top: 50%; width: 300px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.club-stack .fcard:nth-child(1) { z-index: 3; transform: translate(-50%, -42%) rotate(-3deg); }
.club-stack .fcard:nth-child(2) { z-index: 2; transform: translate(-78%, -60%) rotate(-10deg); }
.club-stack .fcard:nth-child(3) { z-index: 1; transform: translate(-22%, -64%) rotate(8deg); }
.club-stack:hover .fcard:nth-child(1) { transform: translate(-50%, -46%) rotate(0deg) scale(1.03); }
.club-m { width: min(900px, 100%); }
.club-m.mem .modal-close { background: rgba(255, 255, 255, .14); color: #fff; }
/* Janela do clube: preto no lugar do degradê do motor */
.cl-top, .cl-hero { background: linear-gradient(135deg, var(--preto), var(--preto-d)); }
.cl-bar i { background: var(--celeste); }
.cl-hero h2 { font-family: var(--f-display); font-weight: 700; text-transform: none; letter-spacing: -.03em; }
.cl-hero h2 span { font-family: var(--f-display); font-weight: 300; color: var(--celeste); text-shadow: none; }

/* ---------- Como pedir: linha simples, ícone num círculo cinza ---------- */
.perks { padding: 36px 0 20px; }
.perks-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px; }
.perk { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.perk[hidden] { display: none; }
.perk-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--noite); }
.perk-ic svg { width: 20px; height: 20px; }
.perk b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.perk small { display: block; color: var(--tmuted); font-size: 13px; line-height: 1.35; }
a.perk:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reservas (bloco pires) ---------- */
.rband { padding: 20px 0 24px; }
.rband-in { background: var(--pires); border-radius: 32px; padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.rband h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); max-width: 16ch; }
.rband-copy p { margin: 12px 0 0; color: var(--tmuted); max-width: 540px; font-size: 15px; }
.rband-act { flex: none; display: grid; gap: 10px; min-width: 240px; }
.rband-mine { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 12px; text-align: left; border: 0; background: var(--surface); color: var(--text); border-radius: 16px; padding: 10px 14px; font-size: 13px; }
.rband-mine b { grid-row: span 2; font-weight: 700; font-size: 22px; color: var(--acc); }
.rband-mine span { color: var(--tmuted); text-transform: capitalize; }
.rband-mine .rv-st { margin: 2px 0 0; padding: 2px 10px; font-size: 11.5px; font-style: normal; justify-self: start; }

/* ---------- Unidades ---------- */
.contact { padding: 48px 0 72px; }
.units { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 12px; }
.unit { display: grid; align-content: start; gap: 10px; background: var(--surface); border: 1px solid var(--hair); border-radius: 24px; padding: 22px; color: inherit; text-decoration: none; }
.unit header { display: grid; gap: 2px; margin-bottom: 4px; }
.unit-tag { font-size: 13px; font-weight: 500; color: var(--acc); }
.unit header b { font-size: 22px; }
.unit-row { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--tmuted); text-decoration: none; line-height: 1.45; }
a.unit-row:hover { color: var(--text); }
.unit-row > [data-ic] { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--acc); }
.unit-note { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--text); }
.unit-note > [data-ic] { flex: none; width: 16px; height: 16px; color: var(--acc); }
.unit-go { margin-top: 4px; height: 46px; border: 0; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font: inherit; font-size: 14px; font-weight: 500; transition: background-color .15s; }
.unit-go:hover { background: var(--btn-h); }
.unit-go.on { background: transparent; color: var(--acc); box-shadow: inset 0 0 0 1.5px currentColor; }
.unit-go.on::before { content: "✓ "; }
.unit-ig { place-content: center; justify-items: center; text-align: center; background: var(--sand); border-color: var(--sand); color: var(--noite); }
.unit-ig[hidden] { display: none; }
.unit-ig > [data-ic] { width: 30px; height: 30px; color: var(--preto); }
.unit-ig b { font-size: 16px; }
.unit-ig small { color: var(--sub-sand); font-size: 12.5px; line-height: 1.4; }
.contact-media { margin-top: 12px; }
.contact-media iframe { width: 100%; height: 260px; border: 0; border-radius: 24px; }

/* ---------- Rodapé ---------- */
.footer { background: var(--pires); color: var(--text); padding: 44px 0 28px; text-align: center; font-size: 14px; }
.footer .wordmark b:first-child:not(:last-child) { color: var(--acc); }
.sh-top .wordmark b:first-child:not(:last-child) { color: var(--preto); }
.footer-logo { font-size: 44px; margin: 0 auto 12px; }
.footer p { margin: 4px 0; color: var(--tmuted); }
.footer .btn-line { color: var(--text); margin-top: 12px; }
.made { margin-top: 18px !important; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.made b { letter-spacing: .3em; color: var(--acc); }

/* ---------- Responsivo ---------- */
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .rband-in { flex-direction: column; align-items: stretch; gap: 20px; }
  .units { grid-template-columns: 1fr 1fr; }
  .unit-ig { grid-column: 1 / -1; }
  .club-in { grid-template-columns: minmax(0, 1fr) 340px; padding: 36px 32px; }
  .club-stack .fcard { width: 250px; }
  .perks-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .club-in { overflow: hidden; }
  .ub-t b { white-space: normal; }
  :root { --nav-h: 62px; }
  .wrap { padding: 0 16px; }
  .nav-in { padding: 0 16px; gap: 10px; }
  .wordmark { font-size: 26px; }
  .footer-logo { font-size: 36px; }
  .nav-orders span:last-child, .nav-cart-label, .nav-call .lbl { display: none; }
  .nav-orders, .nav-call { padding: 9px 10px; }
  .nav-theme { width: 38px; height: 38px; }
  .nav-actions { gap: 6px; }
  .nav-cart { padding: 6px; }
  .mhero { padding: calc(var(--nav-h) + 16px) 0 24px; }
  .mh-title { font-size: 42px; }
  .mh-act { padding: 12px; gap: 10px; }
  .mh-act b { font-size: 14px; }
  .deals { padding: 36px 0 0; }
  .deals-nav { display: none; }
  .deals-row { padding: 60px 16px 16px; scroll-padding-inline: 16px; gap: 12px; }
  .deal { flex-basis: 62%; }
  .menu { padding: 32px 0 24px; }
  .menu-head { gap: 14px; margin-bottom: 8px; }
  .search { min-width: 0; width: 100%; padding-left: 18px; }
  .cats { padding: 10px 16px; }
  /* No celular os cartões viram um carrossel, como no app: menos rolagem */
  .cat-block h3 small::after { content: " · deslize"; }
  .items { display: flex; gap: 12px; margin: 0 -16px; padding: 66px 16px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .items::-webkit-scrollbar { display: none; }
  .item { flex: 0 0 62%; scroll-snap-align: start; }
  .item .item-img { width: 124px; height: 124px; margin-top: -54px; }
  .item-media .cd { top: 62px; }
  .club { padding: 32px 0 8px; }
  .club-in { grid-template-columns: 1fr; gap: 4px; padding: 22px 20px 26px; border-radius: 28px; }
  .club-stack { order: -1; height: 200px; margin-top: 4px; }
  .club-stack .fcard { width: 226px; }
  .club-pills { margin: 14px 0 18px; }
  .club-act .btn { flex: 1 1 100%; }
  .perks { padding: 28px 0 14px; }
  .perks-row { gap: 16px 12px; }
  .perk { flex-direction: column; align-items: flex-start; gap: 8px; }
  .perk-ic { width: 40px; height: 40px; }
  .rband-in { padding: 24px 20px 20px; border-radius: 28px; }
  .rband-act { min-width: 0; }
  .contact { padding: 36px 0 56px; }
  .units { grid-template-columns: 1fr; gap: 10px; }
  .unit { padding: 18px; }
  .contact-media iframe { height: 200px; }
  .im-hero { height: 190px; margin-bottom: 64px; border-radius: 28px 28px 36px 36px; }
  .im-hero::before, .im-hero img { top: 46px; width: 208px; height: 208px; }
  .im-body { padding: 0 20px 8px; }
  .im-body > h3 { font-size: 24px; }
}
@media (max-width: 380px) {
  .nav-in { gap: 6px; }
  .wordmark { font-size: 23px; }
  .item, .deal { flex-basis: 72%; }
}

/* Cartão fidelidade: a marca do cartão usa a serifa itálica do logo */
.fcard.t-cafe .fc-in { color: var(--noite); background: linear-gradient(135deg, #fffaf1, var(--sand)); box-shadow: 0 3cqw 7cqw -3.5cqw rgba(20, 20, 20, .4); }
.t-cafe .fc-brand { font-family: var(--f-script); }

/* ===== Início (6/11/2026, a partir da referência de app de café que o usuário mandou) =====
   Saudação + unidade + busca em cima; banner preto com a xícara saindo da borda; selos curtos embaixo. */
.hero { padding: calc(var(--nav-h) + 6px) 16px 0; }
.hero-in { max-width: 1216px; margin: 0 auto; display: grid; gap: 16px; }
.hero-top { display: flex; align-items: center; gap: 12px 20px; }
.hero-hi { margin: 0; display: grid; gap: 2px; flex: none; font-size: 0.875rem; color: var(--tmuted); }
.hero-hi b { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--text); }
.hero-search { order: 2; flex: 1 1 auto; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--pill); color: var(--tmuted); font: inherit; font-size: 1rem; text-align: left; cursor: text; transition: background-color .2s; }
.hero-search .ic-wrap { display: grid; flex: none; width: 20px; height: 20px; color: var(--text); }
.hero-units { order: 3; display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px; border-radius: 999px; background: var(--pill); }
.hu-lbl { padding: 0 4px 0 10px; font-size: 0.75rem; color: var(--pill-ink); white-space: nowrap; }
.unit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, transform .15s; }
.unit-btn .ic-wrap { display: grid; width: 16px; height: 16px; }
.unit-btn.on { background: var(--btn); color: var(--btn-ink); }
.unit-btn:active { transform: scale(.96); }
@media (hover: hover) { .hero-search:hover { background: var(--hair); } .unit-btn:not(.on):hover { background: var(--surface); } }

.hero-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: center; margin-top: 40px; padding: 0 0 0 56px; min-height: 380px; border-radius: 34px; background: var(--block); color: var(--block-ink); }
.hero-copy { padding: 56px 0; }
.hero-eye { margin: 0 0 18px; }
#openChip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 0.8125rem; color: var(--block-sub); }
#openChip .ic { width: 15px; height: 15px; color: var(--block-acc); }
.hero-title { margin: 0; font-size: clamp(40px, 5vw, 66px); max-width: 12ch; }
.hero-sub { max-width: 440px; margin: 18px 0 28px; font-size: 1rem; color: var(--block-sub); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.hero-go { min-height: 48px; padding: 0 22px 0 24px; background: var(--celeste); color: var(--preto); font-weight: 600; }
.hero-go .ic-wrap { display: grid; width: 18px; height: 18px; }
@media (hover: hover) { .hero-go:hover { background: var(--celeste-h); } .hero-res:hover { color: var(--block-acc); } }
.hero-res { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--block-ink); font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: color .15s; }
.hero-res .ic-wrap { display: grid; width: 18px; height: 18px; color: var(--block-acc); }
.hero-art { position: relative; align-self: stretch; }
.hero-art::before { content: ""; position: absolute; right: 6%; top: 50%; width: 76%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(143, 179, 255, .22), transparent 68%); }
.hero-art img { position: absolute; height: auto; filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .45)); }
.hero-main { width: min(440px, 100%); right: 6%; top: -64px; }
.hero-side { width: 30%; max-width: 160px; left: -6%; bottom: 22px; }
.hero-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--pill); color: var(--pill-ink); font-size: 0.8125rem; font-weight: 500; }
.hero-chips .ic-wrap { display: grid; width: 16px; height: 16px; color: var(--text); }
/* Entrada: a xícara chega girando de leve e o texto sobe em sequência ("reduzir movimento" desliga) */
@media (prefers-reduced-motion: no-preference) {
  .hero-main { animation: heroCup .8s cubic-bezier(.2, .8, .2, 1) .1s both; }
  .hero-side { animation: heroCup .8s cubic-bezier(.2, .8, .2, 1) .25s both; }
  .hero-copy > * { animation: heroUp .5s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .hero-copy > :nth-child(4) { animation-delay: .18s; }
}
@keyframes heroCup { from { opacity: 0; transform: translateY(22px) rotate(-8deg) scale(.94); } }
@keyframes heroUp { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 860px) {
  .hero-top { flex-wrap: wrap; }
  .hero-hi { flex: 1 1 auto; }
  .hero-search { order: 4; flex-basis: 100%; }
}
@media (max-width: 640px) {
  .hero { padding: calc(var(--nav-h) + 2px) 16px 0; }
  .hero-in { gap: 14px; }
  .hero-hi { flex-basis: 100%; }
  .hero-hi b { font-size: 1.375rem; }
  .hero-units { order: 3; flex: 1 1 100%; }
  .hero-units .unit-btn { flex: 1 1 0; padding: 0 10px; }
  .hero-card { grid-template-columns: minmax(0, 1fr) 33%; margin-top: 34px; padding: 22px 0 22px 20px; min-height: 0; border-radius: 28px; }
  .hero-copy { padding: 0; }
  .hero-eye { margin-bottom: 10px; }
  #openChip { padding: 5px 10px; font-size: 0.6875rem; white-space: nowrap; }
  .hero-title { font-size: 1.75rem; max-width: 10ch; } /* sempre em 3 linhas, longe da xícara */
  .hero-sub, .hero-side { display: none; }
  .hero-ctas { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 16px; }
  .hero-go { min-height: 44px; padding: 0 16px 0 18px; font-size: 0.9375rem; }
  .hero-res { font-size: 0.875rem; }
  .hero-chips { gap: 6px; }
  .hero-chips li { padding: 0 12px; gap: 6px; font-size: 0.75rem; }
  .hero-search { font-size: 0.9375rem; }
  .hero-search, .hero-search span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-art::before { right: -10%; width: 120%; }
  .hero-main { width: 145%; max-width: 172px; right: -12px; top: -58px; }
}
@media (max-width: 360px) {
  .hu-lbl { display: none; }
  .hero-card { grid-template-columns: minmax(0, 1fr) 30%; }
  .hero-main { max-width: 140px; top: -50px; right: -10px; }
  #openChip { max-width: 84%; overflow: hidden; text-overflow: ellipsis; }
  #openChip > span { overflow: hidden; text-overflow: ellipsis; }
  .hero-title { font-size: 1.5rem; }
}