/* =========================================================
   Pai d'Égua • Guia Comercial • Design System do protótipo
   ========================================================= */

:root{
  /* cores oficiais tiradas da logo do cliente */
  --brand:#0B0A6E;         /* azul da marca */
  --brand-2:#1B18A8;       /* azul claro, para gradiente */
  --brand-deep:#060378;    /* azul do wordmark */
  --brand-soft:#ECECF9;    /* fundo suave azulado */
  --accent:#B40000;        /* vermelho da marca */
  --accent-2:#D91515;

  --ink:#171A2E;
  --ink-2:#454A66;
  --muted:#858BA6;
  --line:#E7E8F2;

  --bg:#F4F5FA;
  --card:#FFFFFF;

  --gold:#C79A2E;
  --coral:#B40000;
  --wpp:#25D366;
  --ig:#E1306C;

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(22,38,44,.06), 0 4px 14px rgba(22,38,44,.05);
  --sh-2:0 8px 30px rgba(22,38,44,.10);
  --sh-brand:0 10px 26px rgba(180,0,0,.30);

  --nav-h:66px;
  --safe-top:env(safe-area-inset-top, 0px);
  --font:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  background:#0A0A1E;
  color:var(--ink);
  overscroll-behavior:none;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:15px; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

/* ================= MOLDURA DE DEMO (desktop) ================= */
.stage{ min-height:100vh; display:flex; align-items:center; justify-content:center; }
.stage-side{ display:none; }

.device{
  width:100%; max-width:100%;
  height:100vh; height:100dvh;
  background:var(--bg);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}

#app{ flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
#app::-webkit-scrollbar{ width:0; }

@media (min-width:1000px){
  body{
    background:
      radial-gradient(900px 500px at 12% 10%, rgba(27,24,168,.35), transparent 60%),
      radial-gradient(700px 600px at 92% 88%, rgba(180,0,0,.22), transparent 60%),
      #0A0A1E;
  }
  .stage{ gap:64px; padding:40px; }
  .stage-side{ display:block; max-width:390px; color:#fff; }
  .device{
    --safe-top:32px;                     /* espaço para o notch da moldura */
    max-width:400px; height:min(860px, 94vh);
    border-radius:44px; box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 11px #12122B, 0 0 0 13px #2C2C4E;
  }
  .device::before{
    content:''; position:absolute; top:11px; left:50%; transform:translateX(-50%);
    width:112px; height:26px; background:#12122B; border-radius:0 0 16px 16px; z-index:60;
  }
}

.side-logo{ display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.side-logo .mark{ width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg,var(--brand-2),var(--brand-deep));
  display:grid; place-items:center; font-size:26px; box-shadow:var(--sh-brand); }
.side-logo b{ font-size:26px; letter-spacing:-.5px; }
.side-logo span{ display:block; font-size:12px; color:#9A9ED0; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; }
.stage-side h1{ font-size:34px; line-height:1.15; letter-spacing:-1px; margin:0 0 14px; }
.stage-side h1 em{ font-style:normal; color:#8F8CF5; }
.stage-side p{ color:#A7ABD6; line-height:1.6; font-size:15px; margin:0 0 26px; }
.side-steps{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:9px; }
.side-steps li{ display:flex; gap:11px; align-items:center; font-size:14px; color:#D5D7EE; cursor:pointer;
  padding:11px 14px; border-radius:13px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); transition:.18s; }
.side-steps li:hover{ background:rgba(27,24,168,.30); border-color:rgba(143,140,245,.45); transform:translateX(4px); }
.side-steps li b{ width:24px; height:24px; border-radius:8px; background:var(--accent); display:grid; place-items:center; font-size:12px; color:#fff; flex:none; }
.side-note{ font-size:12.5px; color:#7C80AC; line-height:1.6; border-top:1px solid rgba(255,255,255,.09); padding-top:16px; }

/* ================= UTILITÁRIOS ================= */
.screen{ padding-bottom:calc(var(--nav-h) + 22px); animation:fade .28s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.pad{ padding-left:18px; padding-right:18px; }
.row{ display:flex; align-items:center; }
.between{ display:flex; align-items:center; justify-content:space-between; }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 18px; margin:26px 0 13px; }
.sec-head h2{ font-size:17.5px; margin:0; letter-spacing:-.4px; }
.sec-head span{ font-size:12.5px; color:var(--muted); }
.sec-head .more{ font-size:12.5px; color:var(--brand-deep); font-weight:700; }
.hscroll{ display:flex; gap:12px; overflow-x:auto; padding:2px 18px 6px; scroll-snap-type:x mandatory; }
.hscroll::-webkit-scrollbar{ height:0; }
.hscroll > *{ scroll-snap-align:start; flex:none; }

.thumb{ display:grid; place-items:center; color:#fff; font-size:26px; text-shadow:0 3px 10px rgba(0,0,0,.22); }
.badge{ font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; padding:4px 8px; border-radius:7px; }
.badge-spon{ background:rgba(199,154,46,.18); color:#8A6A14; }
.badge-open{ background:rgba(37,211,102,.14); color:#12833C; }
.badge-closed{ background:rgba(255,107,107,.14); color:#C63636; }
.badge-off{ background:var(--coral); color:#fff; }

.star{ color:var(--gold); }
.chip{ font-size:11.5px; font-weight:600; color:var(--ink-2); background:#F1F2F9; border:1px solid var(--line); padding:6px 11px; border-radius:999px; }

.btn{ display:flex; align-items:center; justify-content:center; gap:8px; border-radius:14px; font-weight:700; font-size:15px; padding:15px 18px; transition:.15s; }
.btn:active{ transform:scale(.975); }
.btn-primary{ background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; box-shadow:var(--sh-brand); }
.btn-wpp{ background:var(--wpp); color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.32); }
.btn-ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-block{ width:100%; }

.empty{ text-align:center; padding:60px 30px; color:var(--muted); }
.empty div{ font-size:46px; margin-bottom:12px; }

/* ================= TOPO / HEADERS ================= */
.home-top{
  background:linear-gradient(155deg,#2320C4 0%,#0B0A6E 52%,#060378 100%);
  padding:calc(var(--safe-top) + 20px) 18px 46px;
  border-radius:0 0 30px 30px; color:#fff; position:relative; overflow:hidden;
}
.home-top::after{
  content:''; position:absolute; right:-70px; top:-90px; width:230px; height:230px;
  border-radius:50%; background:rgba(255,255,255,.09);
}
.home-top::before{
  content:''; position:absolute; left:-50px; bottom:-80px; width:170px; height:170px;
  border-radius:50%; background:rgba(255,255,255,.07);
}
.brand{ display:flex; align-items:center; gap:11px; position:relative; z-index:2; }
.brand .mark{ width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.2);
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.35); display:grid; place-items:center; font-size:23px; }
.brand h1{ font-size:21px; margin:0; letter-spacing:-.6px; line-height:1.05; }
.brand small{ font-size:10.5px; opacity:.85; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; }
.loc{ margin-left:auto; text-align:right; font-size:11px; opacity:.92; line-height:1.35; }
.loc b{ display:block; font-size:12.5px; }

.searchbar{
  margin-top:19px; position:relative; z-index:2;
  background:#fff; border-radius:16px; display:flex; align-items:center; gap:10px;
  padding:14px 16px; box-shadow:0 12px 28px rgba(6,3,60,.28);
}
.searchbar input{ border:none; outline:none; flex:1; font-size:14.5px; color:var(--ink); background:none; }
.searchbar input::placeholder{ color:#A9AEC8; }

.appbar{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); padding:calc(var(--safe-top) + 12px) 14px 12px;
  display:flex; align-items:center; gap:12px;
}
.appbar .back{ width:38px; height:38px; border-radius:12px; background:#F1F2F9; display:grid; place-items:center; font-size:17px; flex:none; }
.appbar h2{ font-size:16.5px; margin:0; letter-spacing:-.3px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.appbar small{ display:block; font-weight:500; font-size:11.5px; color:var(--muted); }
.appbar .act{ width:38px; height:38px; border-radius:12px; background:#F1F2F9; display:grid; place-items:center; font-size:16px; flex:none; position:relative; }

/* ================= HOME ================= */
.quickstats{ display:flex; gap:8px; margin:-30px 18px 0; position:relative; z-index:5; }
.quickstats div{ flex:1; background:#fff; border-radius:15px; padding:12px 10px; text-align:center; box-shadow:var(--sh-1); }
.quickstats b{ display:block; font-size:17px; letter-spacing:-.5px; }
.quickstats span{ font-size:10.5px; color:var(--muted); font-weight:600; }

.banner-wrap{ margin-top:20px; position:relative; }
.banners{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:0 18px; }
.banners::-webkit-scrollbar{ height:0; }
.banner{
  flex:none; width:100%; scroll-snap-align:center;
  border-radius:var(--r-lg); padding:20px; color:#fff; position:relative; overflow:hidden;
  min-height:146px; display:flex; flex-direction:column; justify-content:center; box-shadow:var(--sh-2);
}
.banner .bemoji{ position:absolute; right:-6px; bottom:-16px; font-size:104px; opacity:.28; transform:rotate(-12deg); }
.banner .btag{ font-size:9.5px; font-weight:800; letter-spacing:1.2px; background:rgba(255,255,255,.24);
  padding:5px 9px; border-radius:7px; align-self:flex-start; border:1px solid rgba(255,255,255,.3); }
.banner h3{ font-size:19px; margin:11px 0 4px; letter-spacing:-.5px; line-height:1.2; max-width:74%; position:relative; }
.banner p{ margin:0 0 14px; font-size:12.5px; opacity:.94; max-width:74%; position:relative; }
.banner .bcta{ align-self:flex-start; background:#fff; color:var(--ink); font-weight:800; font-size:12.5px;
  padding:9px 16px; border-radius:11px; position:relative; }
.dots{ display:flex; gap:6px; justify-content:center; margin-top:12px; }
.dots i{ width:6px; height:6px; border-radius:99px; background:#CBCDE0; transition:.25s; }
.dots i.on{ width:20px; background:var(--accent); }

.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 18px; }
.cat-item{ text-align:center; }
.cat-item .ic{ height:60px; border-radius:18px; display:grid; place-items:center; font-size:25px; margin-bottom:6px;
  box-shadow:var(--sh-1); transition:.18s; }
.cat-item:active .ic{ transform:scale(.93); }
.cat-item span{ font-size:10.5px; font-weight:600; color:var(--ink-2); line-height:1.25; display:block; min-height:26px; }

.spon-card{
  width:206px; background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); border:1px solid var(--line);
}
.spon-card .cover{ height:86px; position:relative; }
.spon-card .cover .badge{ position:absolute; top:9px; left:9px; background:rgba(255,255,255,.92); color:#B87B0A; }
.spon-card .logo{ position:absolute; bottom:-19px; left:13px; width:46px; height:46px; border-radius:14px;
  border:3px solid #fff; box-shadow:var(--sh-1); font-size:21px; }
.spon-card .body{ padding:25px 13px 13px; }
.spon-card h4{ margin:0 0 3px; font-size:14px; letter-spacing:-.3px; }
.spon-card .meta{ font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:6px; }

.promo-card{ width:160px; background:#fff; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1); border:1px solid var(--line); }
.promo-card .cover{ height:100px; position:relative; }
.promo-card .cover .badge-off{ position:absolute; top:8px; right:8px; }
.promo-card .body{ padding:11px; }
.promo-card h4{ margin:0 0 4px; font-size:12.5px; line-height:1.3; height:32px; overflow:hidden; }
.promo-card .emp{ font-size:10.5px; color:var(--muted); margin-bottom:7px; }
.promo-card .price{ font-size:15px; font-weight:800; color:var(--accent); letter-spacing:-.4px; }
.promo-card .old{ font-size:11px; color:#AFC2C6; text-decoration:line-through; margin-left:5px; font-weight:600; }

/* ================= CARD DE EMPRESA ================= */
.emp-card{ background:#fff; border-radius:var(--r-lg); padding:14px; margin:0 18px 12px; box-shadow:var(--sh-1); border:1px solid var(--line); }
.emp-card .top{ display:flex; gap:12px; }
.emp-card .logo{ width:58px; height:58px; border-radius:17px; flex:none; font-size:27px; }
.emp-card .info{ flex:1; min-width:0; }
.emp-card h3{ margin:0 0 3px; font-size:15px; letter-spacing:-.3px; display:flex; align-items:center; gap:5px; }
.emp-card h3 .ver{ color:var(--brand-2); font-size:12px; }
.emp-card .line1{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2); font-weight:600; margin-bottom:5px; }
.emp-card .line2{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); flex-wrap:wrap; }
.emp-card .dist{ background:var(--brand-soft); color:var(--brand-deep); font-weight:700; padding:3px 7px; border-radius:6px; font-size:10.5px; }
.emp-actions{ display:flex; gap:7px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.act-mini{ flex:1; height:38px; border-radius:11px; background:#F3F4FA; display:grid; place-items:center; font-size:16px; transition:.15s; }
.act-mini:active{ transform:scale(.9); }
.act-mini.wpp{ background:rgba(37,211,102,.12); }
.act-mini.ig{ background:rgba(225,48,108,.1); }
.act-mini.loja{ flex:2.4; background:var(--ink); color:#fff; font-size:12px; font-weight:700; gap:5px;
  display:flex; align-items:center; justify-content:center; white-space:nowrap; }

/* ================= CATEGORIAS / SEGMENTOS ================= */
.cat-row{ display:flex; align-items:center; gap:13px; background:#fff; padding:14px; border-radius:var(--r); margin:0 18px 10px;
  box-shadow:var(--sh-1); border:1px solid var(--line); }
.cat-row .ic{ width:50px; height:50px; border-radius:15px; font-size:23px; flex:none; }
.cat-row .info{ flex:1; }
.cat-row h3{ margin:0 0 2px; font-size:14.5px; letter-spacing:-.3px; }
.cat-row p{ margin:0; font-size:11.5px; color:var(--muted); }
.cat-row .arrow{ color:#C4C8DC; font-size:19px; }

.seg-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; padding:0 18px; }
.seg-card{ background:#fff; border-radius:var(--r); padding:16px 14px; box-shadow:var(--sh-1); border:1px solid var(--line); }
.seg-card .ic{ width:44px; height:44px; border-radius:14px; background:var(--brand-soft); display:grid; place-items:center; font-size:21px; margin-bottom:10px; }
.seg-card h4{ margin:0 0 3px; font-size:13.5px; letter-spacing:-.2px; }
.seg-card p{ margin:0; font-size:11px; color:var(--muted); }

.cat-hero{ padding:calc(var(--safe-top) + 66px) 18px 24px; color:#fff; border-radius:0 0 28px 28px; position:relative; overflow:hidden; }
.cat-hero .big{ position:absolute; right:-10px; bottom:-24px; font-size:110px; opacity:.22; }
.cat-hero h1{ margin:0 0 5px; font-size:24px; letter-spacing:-.8px; }
.cat-hero p{ margin:0; font-size:13px; opacity:.92; }

/* ================= PÁGINA DA EMPRESA ================= */
.emp-banner{ height:172px; position:relative; }
.emp-banner .bemoji{ position:absolute; right:14px; bottom:6px; font-size:96px; opacity:.3; }
.emp-banner .navbtns{ position:absolute; top:calc(var(--safe-top) + 14px); left:14px; right:14px; display:flex; }
.emp-banner .nb{ width:38px; height:38px; border-radius:12px; background:rgba(0,0,0,.32); backdrop-filter:blur(8px);
  color:#fff; display:grid; place-items:center; font-size:16px; }
.emp-banner .navbtns .sp{ flex:1; }
.emp-banner .navbtns .nb + .nb{ margin-left:8px; }

.emp-head{ background:#fff; margin:-38px 14px 0; border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-2); position:relative; }
.emp-head .logo{ width:72px; height:72px; border-radius:22px; border:4px solid #fff; margin-top:-46px; box-shadow:var(--sh-1); font-size:34px; }
.emp-head h1{ margin:11px 0 5px; font-size:20px; letter-spacing:-.6px; display:flex; align-items:center; gap:6px; }
.emp-head h1 .ver{ color:var(--brand-2); font-size:15px; }
.emp-head .sub{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2); flex-wrap:wrap; }
.emp-head .rate{ display:flex; align-items:center; gap:4px; font-weight:700; }
.tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }

.quick-actions{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:16px 14px 4px; }
.qa{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:13px 6px; text-align:center; box-shadow:var(--sh-1); transition:.15s; }
.qa:active{ transform:scale(.94); }
.qa .ic{ font-size:21px; margin-bottom:5px; display:block; }
.qa span{ font-size:10.5px; font-weight:700; color:var(--ink-2); }
.qa.on{ background:var(--brand-soft); border-color:var(--brand-2); }

.card{ background:#fff; border-radius:var(--r-lg); margin:14px; padding:16px; box-shadow:var(--sh-1); border:1px solid var(--line); }
.card h3{ margin:0 0 11px; font-size:14.5px; letter-spacing:-.3px; display:flex; align-items:center; gap:7px; }
.card p{ margin:0; font-size:13px; line-height:1.62; color:var(--ink-2); }
.kv{ display:flex; justify-content:space-between; padding:9px 0; font-size:13px; border-bottom:1px dashed var(--line); }
.kv:last-child{ border:none; }
.kv b{ font-weight:600; color:var(--ink-2); }
.kv span{ color:var(--muted); font-size:12.5px; }
.kv.now b{ color:var(--brand-deep); }

.map{ height:150px; border-radius:var(--r); position:relative; overflow:hidden; margin-top:12px;
  background:
    linear-gradient(#DEE0EE 1px, transparent 1px) 0 0/100% 26px,
    linear-gradient(90deg,#DEE0EE 1px, transparent 1px) 0 0/26px 100%,
    linear-gradient(150deg,#F2F3FA,#E6E8F4); border:1px solid var(--line); }
.map::before{ content:''; position:absolute; left:-10%; top:56%; width:120%; height:20px; background:#D3D6E8; transform:rotate(-8deg); }
.map::after{ content:''; position:absolute; left:32%; top:-10%; width:16px; height:130%; background:#D3D6E8; transform:rotate(9deg); }
.map .pin{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-size:32px; z-index:2;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.22)); animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translate(-50%,-62%) } }
.map .go{ position:absolute; right:10px; bottom:10px; background:#fff; border-radius:11px; padding:9px 13px;
  font-size:12px; font-weight:700; box-shadow:var(--sh-1); z-index:2; }

.review{ display:flex; gap:11px; padding:12px 0; border-bottom:1px dashed var(--line); }
.review:last-child{ border:none; padding-bottom:0; }
.review .av{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:13px; flex:none; }
.review b{ font-size:13px; }
.review .st{ font-size:10.5px; }
.review p{ font-size:12.5px; margin-top:3px; color:var(--ink-2); }

/* ================= LOJA / PRODUTOS ================= */
.store-head{ background:linear-gradient(135deg,#0B0A6E,#232159); color:#fff; padding:calc(var(--safe-top) + 14px) 16px 18px; }
.store-head .row1{ display:flex; align-items:center; gap:12px; }
.store-head .logo{ width:46px; height:46px; border-radius:15px; font-size:22px; }
.store-head h2{ margin:0; font-size:16px; letter-spacing:-.3px; }
.store-head small{ font-size:11.5px; opacity:.75; }
.store-info{ display:flex; gap:8px; margin-top:14px; }
.store-info div{ flex:1; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); border-radius:12px; padding:8px; text-align:center; }
.store-info b{ display:block; font-size:12.5px; }
.store-info span{ font-size:9.5px; opacity:.7; text-transform:uppercase; letter-spacing:.6px; font-weight:700; }

.prod{ display:flex; gap:13px; background:#fff; border-radius:var(--r); padding:12px; margin:0 14px 11px; box-shadow:var(--sh-1); border:1px solid var(--line); }
.prod .pic{ width:82px; height:82px; border-radius:14px; flex:none; font-size:34px; position:relative; }
.prod .pic .badge-off{ position:absolute; top:-6px; left:-6px; font-size:9px; padding:3px 6px; box-shadow:0 3px 8px rgba(255,107,107,.4); }
.prod .info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.prod h4{ margin:0 0 3px; font-size:13.5px; letter-spacing:-.2px; }
.prod p{ margin:0 0 auto; font-size:11.5px; color:var(--muted); line-height:1.45; }
.prod .foot{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:8px; }
.prod .price{ font-size:16px; font-weight:800; letter-spacing:-.5px; color:var(--ink); }
.prod .price.free{ color:var(--accent); font-size:14px; }
.prod .old{ font-size:11.5px; color:#AFC2C6; text-decoration:line-through; font-weight:600; margin-left:6px; }
.add{ width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:#fff; font-size:20px; display:grid; place-items:center; box-shadow:var(--sh-brand); flex:none; }
.add:active{ transform:scale(.88); }
.qty{ display:flex; align-items:center; gap:2px; background:#FBECEC; border-radius:12px; padding:3px; }
.qty button{ width:30px; height:30px; border-radius:9px; background:#fff; color:var(--accent); font-size:17px; font-weight:700;
  display:grid; place-items:center; box-shadow:var(--sh-1); }
.qty b{ min-width:26px; text-align:center; font-size:14px; color:var(--accent); }
/* sinal de "menos" desenhado em CSS, sem usar caractere de traço */
.minus{ display:block; width:12px; height:2.5px; border-radius:2px; background:currentColor; }

.store-tabs{ display:flex; gap:8px; overflow-x:auto; padding:14px 14px 10px; }
.store-tabs::-webkit-scrollbar{ height:0; }
.store-tabs button{ flex:none; padding:9px 15px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:#fff; border:1px solid var(--line); color:var(--ink-2); }
.store-tabs button.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ================= CARRINHO / CHECKOUT ================= */
.cart-item{ display:flex; gap:12px; padding:13px 0; border-bottom:1px dashed var(--line); }
.cart-item:last-child{ border:none; }
.cart-item .pic{ width:56px; height:56px; border-radius:14px; flex:none; font-size:25px; }
.cart-item h4{ margin:0 0 2px; font-size:13.5px; }
.cart-item small{ font-size:11.5px; color:var(--muted); }
.cart-item .pr{ font-weight:800; font-size:14px; letter-spacing:-.3px; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-weight:700; color:var(--ink-2); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%; border:1.5px solid var(--line); border-radius:13px; padding:13px 14px; outline:none; background:#FBFDFD;
  color:var(--ink); transition:.15s;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--brand-2); background:#fff; box-shadow:0 0 0 4px rgba(27,24,168,.13); }
.field textarea{ min-height:74px; resize:none; }
.field .hint{ font-size:11px; color:var(--muted); margin-top:5px; }

.coupon-row{ display:flex; gap:8px; }
.coupon-row input{ flex:1; text-transform:uppercase; }
.coupon-row button{ padding:0 20px; border-radius:13px; background:var(--ink); color:#fff; font-weight:700; font-size:13.5px; }
.coupon-ok{ margin-top:9px; background:rgba(37,211,102,.1); border:1px dashed var(--wpp); color:#12833C;
  border-radius:11px; padding:10px 12px; font-size:12.5px; font-weight:700; display:flex; justify-content:space-between; }

.totals .kv{ font-size:13.5px; }
.totals .grand{ display:flex; justify-content:space-between; align-items:center; margin-top:11px; padding-top:13px; border-top:2px solid var(--line); }
.totals .grand b{ font-size:13px; color:var(--ink-2); }
.totals .grand strong{ font-size:23px; letter-spacing:-.8px; color:var(--brand-deep); }

.pay-opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pay{ border:1.5px solid var(--line); border-radius:13px; padding:12px 6px; text-align:center; background:#FBFDFD; transition:.15s; }
.pay .ic{ font-size:20px; display:block; margin-bottom:4px; }
.pay span{ font-size:11px; font-weight:700; color:var(--ink-2); }
.pay.on{ border-color:var(--brand-2); background:var(--brand-soft); box-shadow:0 0 0 3px rgba(27,24,168,.13); }

.toggle-row{ display:flex; gap:8px; margin-bottom:14px; }
.toggle-row button{ flex:1; padding:12px; border-radius:13px; border:1.5px solid var(--line); background:#FBFDFD;
  font-size:13px; font-weight:700; color:var(--ink-2); }
.toggle-row button.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* fica ancorada logo ACIMA da navegação inferior (que é sobreposta ao conteúdo) */
.bottom-bar{
  position:sticky; bottom:var(--nav-h); z-index:45; background:rgba(255,255,255,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); padding:13px 16px;
  display:flex; gap:12px; align-items:center;
}
.bottom-bar .tot small{ display:block; font-size:10.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.bottom-bar .tot b{ font-size:19px; letter-spacing:-.6px; }
.bottom-bar .btn{ flex:1; }

/* ================= MENSAGEM WHATSAPP (o "uau") ================= */
.wpp-preview{
  background:#ECE5DD; border-radius:var(--r-lg); padding:16px 14px; margin:14px; position:relative; overflow:hidden;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.05);
}
.wpp-preview::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(#D9CFC4 1px, transparent 1px); background-size:16px 16px;
}
.bubble{
  position:relative; background:#DCF8C6; border-radius:12px 12px 3px 12px; padding:12px 13px 8px; margin-left:auto;
  max-width:96%; box-shadow:0 1px 2px rgba(0,0,0,.14); font-size:12.5px; line-height:1.62; color:#111B21;
  white-space:pre-wrap; word-break:break-word; font-family:'Segoe UI',system-ui,sans-serif;
}
.bubble .time{ display:block; text-align:right; font-size:10px; color:#667781; margin-top:5px; }
.bubble .time i{ color:#53BDEB; font-style:normal; }

.msg-actions{ display:flex; gap:9px; padding:0 14px; }
.msg-actions .btn{ flex:1; }

.wow-strip{ background:linear-gradient(135deg,#060378,#2320C4); color:#fff; margin:14px; border-radius:var(--r-lg); padding:16px; }
.wow-strip h3{ margin:0 0 5px; font-size:15px; display:flex; align-items:center; gap:7px; }
.wow-strip p{ margin:0; font-size:12.5px; opacity:.92; line-height:1.55; }

/* Tela simulada do WhatsApp */
.wa-screen{ min-height:100%; display:flex; flex-direction:column; background:#ECE5DD; }
.wa-top{ background:#075E54; color:#fff; padding:calc(var(--safe-top) + 12px) 14px 12px; display:flex; align-items:center; gap:11px; }
.wa-top .av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:19px; }
.wa-top b{ font-size:15px; display:block; }
.wa-top small{ font-size:11px; opacity:.8; }
.wa-body{ flex:1; padding:16px 12px; position:relative; background-image:radial-gradient(#D9CFC4 1px, transparent 1px); background-size:16px 16px; }
.wa-day{ text-align:center; margin-bottom:14px; }
.wa-day span{ background:#fff; border-radius:8px; padding:5px 11px; font-size:10.5px; color:#54656F; box-shadow:0 1px 1px rgba(0,0,0,.1); }
.bubble-in{ background:#fff; border-radius:12px 12px 12px 3px; margin-right:auto; margin-left:0; max-width:82%; }
.typing{ display:inline-flex; gap:4px; align-items:center; }
.typing i{ width:6px; height:6px; border-radius:50%; background:#9AA6AC; animation:tp 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
@keyframes tp{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }
.wa-input{ background:#F0F0F0; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); display:flex; gap:8px; align-items:center; }
.wa-input div{ flex:1; background:#fff; border-radius:22px; padding:11px 15px; font-size:13px; color:#9AA6AC; }
.wa-input .snd{ width:42px; height:42px; border-radius:50%; background:#00A884; color:#fff; display:grid; place-items:center; font-size:18px; }

.success-hero{ text-align:center; padding:34px 24px 8px; }
.success-hero .ring{ width:88px; height:88px; border-radius:50%; background:rgba(37,211,102,.13); display:grid; place-items:center;
  margin:0 auto 16px; font-size:42px; animation:pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop{ from{ transform:scale(.4); opacity:0 } }
.success-hero h1{ font-size:22px; margin:0 0 7px; letter-spacing:-.6px; }
.success-hero p{ font-size:13.5px; color:var(--ink-2); margin:0; line-height:1.55; }

/* ================= PAINÉIS (mockups) ================= */
.panel-top{ background:linear-gradient(135deg,#0B0A6E,#232159); color:#fff; padding:calc(var(--safe-top) + 16px) 18px 22px; }
.panel-top.master{ background:linear-gradient(135deg,#8C0000,#4A0303); }
.panel-top .row1{ display:flex; align-items:center; gap:11px; }
.panel-top .logo{ width:44px; height:44px; border-radius:14px; font-size:21px; }
.panel-top h2{ margin:0; font-size:16.5px; letter-spacing:-.3px; }
.panel-top small{ font-size:11.5px; opacity:.72; }
.panel-top .mock-tag{ margin-left:auto; font-size:9px; font-weight:800; letter-spacing:1px; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25); padding:5px 9px; border-radius:7px; }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px; }
.stat{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); border-radius:15px; padding:13px; }
.stat b{ display:block; font-size:21px; letter-spacing:-.7px; }
.stat span{ font-size:10.5px; opacity:.72; font-weight:600; }
.stat .up{ display:block; margin-top:4px; font-size:10px; color:#7BE8A0; font-weight:800; }

.panel-menu{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; padding:16px 14px 0; }
.pm{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:15px; box-shadow:var(--sh-1); }
.pm .ic{ width:40px; height:40px; border-radius:13px; display:grid; place-items:center; font-size:19px; margin-bottom:9px; }
.pm h4{ margin:0 0 3px; font-size:13px; }
.pm p{ margin:0; font-size:10.5px; color:var(--muted); line-height:1.4; }

.order-row{ display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px dashed var(--line); }
.order-row:last-child{ border:none; }
.order-row .st{ width:8px; height:8px; border-radius:50%; flex:none; }
.order-row b{ font-size:13px; display:block; }
.order-row small{ font-size:11px; color:var(--muted); }
.order-row .val{ margin-left:auto; text-align:right; }
.order-row .val b{ font-size:14px; }
.st-novo{ background:var(--coral) } .st-preparo{ background:var(--gold) }
.st-entrega{ background:#4A90E2 } .st-concluido{ background:var(--wpp) }
.pill{ font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.5px; }

.approve-row{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px dashed var(--line); }
.approve-row:last-child{ border:none; }
.approve-row .lg{ width:42px; height:42px; border-radius:13px; font-size:20px; flex:none; }
.approve-row .btns{ margin-left:auto; display:flex; gap:6px; }
.approve-row .btns button{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:14px; }
.ok-btn{ background:rgba(37,211,102,.14); color:#12833C; }
.no-btn{ background:rgba(255,107,107,.13); color:#C63636; }

.plan{ border:1.5px solid var(--line); border-radius:var(--r-lg); padding:16px; margin-bottom:11px; background:#fff; position:relative; }
.plan.destaque{ border-color:var(--gold); box-shadow:0 10px 26px rgba(246,185,59,.2); }
.plan .rib{ position:absolute; top:-9px; right:14px; background:var(--gold); color:#fff; font-size:9px; font-weight:800;
  padding:4px 9px; border-radius:6px; letter-spacing:.8px; }
.plan .ph{ display:flex; align-items:baseline; gap:7px; margin-bottom:4px; }
.plan .ph h3{ margin:0; font-size:17px; letter-spacing:-.4px; }
.plan .pr{ margin-left:auto; font-size:21px; font-weight:800; letter-spacing:-.8px; }
.plan .pr small{ font-size:11px; font-weight:600; color:var(--muted); }
.plan ul{ list-style:none; margin:11px 0 0; padding:0; display:grid; gap:6px; }
.plan li{ font-size:12px; color:var(--ink-2); display:flex; gap:7px; align-items:flex-start; }
.plan li.no{ color:#B4C4C8; }
.plan .cnt{ font-size:11px; color:var(--muted); margin-top:10px; padding-top:9px; border-top:1px dashed var(--line); }

.bar-chart{ display:flex; align-items:flex-end; gap:7px; height:96px; margin-top:6px; }
.bar-chart div{ flex:1; background:linear-gradient(180deg,var(--brand-2),var(--brand)); border-radius:6px 6px 3px 3px; position:relative; }
.bar-chart div span{ position:absolute; bottom:-18px; left:0; right:0; text-align:center; font-size:9px; color:var(--muted); font-weight:700; }
.chart-wrap{ padding-bottom:20px; }

.ad-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:12px; }
.ad-row:last-child{ border:none; }
.ad-row .info b{ font-size:12.5px; display:block; }
.ad-row .info small{ color:var(--muted); font-size:10.5px; }
.ad-row .money{ margin-left:auto; font-weight:800; font-size:13px; }

/* ================= NAV INFERIOR ================= */
.nav{
  height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.97); backdrop-filter:blur(16px); border-top:1px solid var(--line);
  display:flex; align-items:center; position:absolute; bottom:0; left:0; right:0; z-index:50;
}
.nav button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:#A6BBC0; font-size:9.5px; font-weight:700; position:relative; }
.nav button .ic{ font-size:20px; filter:grayscale(1) opacity(.55); transition:.18s; }
.nav button.on{ color:var(--brand-deep); }
.nav button.on .ic{ filter:none; transform:translateY(-2px); }
.nav .cart-badge{ position:absolute; top:-3px; right:50%; margin-right:-20px; background:var(--accent); color:#fff;
  font-size:9.5px; min-width:17px; height:17px; border-radius:99px; display:grid; place-items:center; padding:0 4px; border:2px solid #fff; }

/* ================= TOAST / SHEET ================= */
.toast{
  position:absolute; left:50%; bottom:calc(var(--nav-h) + 20px); transform:translate(-50%,20px);
  background:var(--ink); color:#fff; padding:13px 18px; border-radius:14px; font-size:13px; font-weight:600;
  box-shadow:var(--sh-2); z-index:200; opacity:0; pointer-events:none; transition:.28s; max-width:86%; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

.sheet-bg{ position:absolute; inset:0; background:rgba(10,10,30,.55); backdrop-filter:blur(3px); z-index:150; opacity:0;
  pointer-events:none; transition:.25s; }
.sheet-bg.show{ opacity:1; pointer-events:auto; }
.sheet{ position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:26px 26px 0 0; z-index:160;
  transform:translateY(100%); transition:.32s cubic-bezier(.3,1,.4,1); max-height:82%; overflow-y:auto;
  padding:8px 18px calc(24px + env(safe-area-inset-bottom)); }
.sheet.show{ transform:none; }
.sheet .grab{ width:40px; height:4px; border-radius:99px; background:var(--line); margin:0 auto 16px; }
.sheet h3{ margin:0 0 4px; font-size:17px; letter-spacing:-.4px; }
.sheet .sub{ font-size:12.5px; color:var(--muted); margin-bottom:16px; }
.sheet-item{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px dashed var(--line); font-size:13.5px; font-weight:600; }
.sheet-item:last-child{ border:none; }
.sheet-item .ic{ width:38px; height:38px; border-radius:12px; background:#F1F2F9; display:grid; place-items:center; font-size:17px; }
.sheet-item small{ display:block; font-weight:500; font-size:11.5px; color:var(--muted); }

/* =========================================================
   ARTES OFICIAIS DO CLIENTE
   logo, ícones de categoria, tiles de segmento e fotos de capa
   ========================================================= */

/* logotipo provisório das empresas: monograma na cor da categoria */
.mono{ display:grid; place-items:center; color:#fff; font-weight:800; letter-spacing:.5px; }
.emp-card .logo.mono{ font-size:19px; }
.emp-head .logo.mono{ font-size:26px; }
.spon-card .logo.mono{ font-size:16px; }
.store-head .logo.mono{ font-size:15px; }
.panel-top .logo.mono{ font-size:15px; }
.wa-top .av.mono{ font-size:14px; }

/* miniatura clara de produto (ainda sem foto real) */
.tile{ display:grid; place-items:center; }

/* logo da marca */
.brand .mark{
  width:auto; height:66px; background:#fff; border:none; border-radius:15px;
  padding:7px 12px; box-shadow:0 8px 22px rgba(0,0,0,.22); backdrop-filter:none;
}
.side-logo .mark{ width:auto; height:64px; background:#fff; padding:7px 12px; border-radius:15px; }
.nav-brand .mk{ height:40px; width:auto; background:none; box-shadow:none; border-radius:0; }

/* ícone de categoria dentro do quadrado colorido */
.cat-item .ic, .cat-row .ic{ overflow:hidden; }
.cat-item .ic img{ width:54%; height:auto; display:block; }
.cat-row .ic img{ width:56%; height:auto; display:block; }
.cat-item .ic, .cat-row .ic{ display:grid; place-items:center; }

/* tiles de segmento: a arte já traz o ícone e o nome */
.seg-tile{
  position:relative; display:block; width:100%; padding:0; overflow:hidden;
  border-radius:14px; box-shadow:var(--sh-1); transition:.16s; line-height:0;
}
.seg-tile img{ display:block; width:100%; height:auto; }
.seg-tile:active{ transform:scale(.955); }
.seg-tile .cnt{
  position:absolute; top:7px; right:7px; background:rgba(255,255,255,.94); color:var(--ink);
  font-size:9.5px; font-weight:800; padding:3px 7px; border-radius:6px; line-height:1.3;
}
.seg-grid{ gap:11px; }

/* banner rotativo com foto */
.banner{ background-size:cover; background-position:center; }
.banner .shade{ position:absolute; inset:0; z-index:1; }
.banner > *{ position:relative; z-index:2; }

/* capa de categoria com foto */
.cat-hero{ background-size:cover; background-position:center; }
.cat-hero .shade{ position:absolute; inset:0; z-index:1; }
.cat-hero > *{ position:relative; z-index:2; }
.cat-hero .big{
  position:absolute; right:16px; bottom:6px; width:118px; height:auto;
  opacity:.30; font-size:0;
}

/* card patrocinado com foto */
.spon-card .cover{ background-size:cover; background-position:center; }
.spon-card .cover::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,8,50,.34) 0%,rgba(10,8,50,0) 58%);
}
.spon-card .cover .badge, .spon-card .cover .logo{ z-index:2; }

/* capa da página da empresa */
.emp-banner{ background-size:cover; background-position:center; }
.emp-banner .shade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(8,6,60,.58) 0%,rgba(8,6,60,.14) 42%,rgba(8,6,60,.42) 100%);
}
.emp-banner .navbtns, .emp-banner .badge{ z-index:3; }

/* miniatura de segmento na fila de aprovação do painel master */
.approve-row .lg{ width:50px; height:37px; border-radius:9px; object-fit:cover; flex:none; }

/* =========================================================
   TROCA DE VISUALIZAÇÃO: CELULAR  x  COMPUTADOR
   O botão e a visão de computador existem apenas em telas
   grandes. No celular o app abre direto, sem essa opção.
   ========================================================= */
.view-switch{ display:none; }
.browser-bar{ display:none; }
.nav-brand, .nav-city, .nav-spacer, .home-hero{ display:none; }

@media (min-width:1000px){

  .view-switch{
    position:fixed; top:26px; left:50%; transform:translateX(-50%); z-index:300;
    display:flex; align-items:center; gap:12px;
    background:rgba(13,30,35,.82); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.14); border-radius:99px; padding:7px 9px 7px 18px;
    box-shadow:0 14px 40px rgba(0,0,0,.45);
  }
  .vs-label{ font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#7FA2A8; }
  .vs-group{ display:flex; gap:4px; background:rgba(255,255,255,.07); border-radius:99px; padding:4px; }
  .vs-group button{
    display:flex; align-items:center; gap:7px; border-radius:99px; padding:9px 18px;
    font-size:13.5px; font-weight:700; color:#B9D2D6; transition:.2s;
  }
  .vs-group button .ic{ font-size:15px; }
  .vs-group button:hover{ color:#fff; }
  .vs-group button.on{
    background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff;
    box-shadow:0 6px 18px rgba(18,184,174,.4);
  }

  .stage{ padding-top:96px; align-items:flex-start; }
  .stage-side{ position:sticky; top:96px; }

  /* ---------- barra do navegador (só na visão de computador) ---------- */
  .view-desktop .browser-bar{
    display:flex; align-items:center; gap:8px; order:-2; flex:none;
    height:46px; padding:0 16px; background:#E9F0F1; border-bottom:1px solid #D6E3E5;
  }
  .browser-bar .dot{ width:11px; height:11px; border-radius:50%; flex:none; }
  .browser-bar .dot.r{ background:#FF5F57 } .browser-bar .dot.y{ background:#FEBC2E } .browser-bar .dot.g{ background:#28C840 }
  .browser-bar .url{
    flex:1; margin:0 12px; background:#fff; border-radius:99px; padding:7px 16px;
    font-size:12.5px; color:var(--ink-2); font-weight:600; text-align:center; box-shadow:inset 0 0 0 1px #DCE7E9;
  }
  .browser-bar .url span{ margin-right:5px; opacity:.55; }
  .browser-bar .bb-ic{ color:#8AA3A8; font-size:15px; }

  /* ---------- a moldura vira uma janela de navegador ---------- */
  .view-desktop .stage{ gap:0; padding:96px 34px 34px; justify-content:center; }
  .view-desktop .stage-side{ display:none; }
  .view-desktop .device{
    --safe-top:0px;
    max-width:1180px; width:100%; height:min(880px, calc(100vh - 130px));
    border-radius:16px; box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  }
  .view-desktop .device::before{ display:none; }   /* sem notch */

  /* ---------- a navegação vai para o topo ---------- */
  .view-desktop .nav{
    position:static; order:-1; flex:none; height:66px; padding:0 26px;
    border-top:none; border-bottom:1px solid var(--line); gap:6px;
  }
  .view-desktop .nav .nav-brand{ display:flex; }
  .view-desktop .nav button{
    flex:none; flex-direction:row; gap:8px; padding:10px 16px; border-radius:12px;
    font-size:13.5px; transition:.18s;
  }
  .view-desktop .nav button:hover{ background:#F1F2F9; color:var(--brand-deep); }
  .view-desktop .nav button.on{ background:var(--brand-soft); }
  .view-desktop .nav button .ic{ font-size:17px; }
  .view-desktop .nav .cart-badge{ position:static; margin:0 0 0 2px; border:none; }
  .view-desktop .nav .nav-spacer{ flex:1; }

  .nav-brand{
    display:none; align-items:center; gap:10px; margin-right:22px; flex:none;
    font-size:16px; font-weight:800; letter-spacing:-.4px; color:var(--ink);
  }
  .nav-brand .mk{
    display:block; height:50px; width:auto;
    background:none; box-shadow:none; border-radius:0;
  }
  .nav-brand small{ display:block; font-size:8.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); font-weight:700; }
  .view-desktop .nav .nav-city{
    display:flex; align-items:center; gap:6px; flex:none; font-size:12.5px; font-weight:700;
    color:var(--brand-deep); background:var(--brand-soft); border-radius:99px; padding:9px 15px;
  }

  /* ---------- conteúdo em duas colunas ---------- */
  .view-desktop .screen{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start; gap:0 20px; padding:0 32px 56px;
  }
  .view-desktop .screen > *{ grid-column:1 / -1; }               /* padrão: linha inteira */
  .view-desktop .screen > .emp-card,
  .view-desktop .screen > .prod,
  .view-desktop .screen > .card{ grid-column:auto; margin:0 0 18px; align-self:start; }

  /* elementos que sangram até a borda da janela */
  .view-desktop .home-top,
  .view-desktop .cat-hero,
  .view-desktop .emp-banner,
  .view-desktop .store-head,
  .view-desktop .panel-top{ margin:0 -32px; border-radius:0; }
  .view-desktop .appbar{ margin:0 -32px; padding-left:32px; padding-right:32px; }

  /* no computador a marca já está na barra de cima, então o topo vira um hero */
  .view-desktop .home-top{ padding:52px 32px 62px; }
  .view-desktop .home-top .brand{ display:none; }
  .view-desktop .home-hero{ display:block; position:relative; z-index:2; }
  .view-desktop .home-hero h2{
    margin:0 0 12px; font-size:42px; line-height:1.1; letter-spacing:-1.4px; color:#fff;
  }
  .view-desktop .home-hero p{ margin:0; font-size:15.5px; color:rgba(255,255,255,.9); max-width:520px; }
  .view-desktop .searchbar{ max-width:620px; margin-top:28px; }
  .view-desktop .quickstats{ margin:-34px 0 0; max-width:520px; }

  .view-desktop .banner-wrap{ margin-top:26px; }
  .view-desktop .banners{ padding:0; }
  .view-desktop .banner{ min-height:200px; padding:32px; }
  .view-desktop .banner h3{ font-size:27px; max-width:60%; }
  .view-desktop .banner p{ font-size:14.5px; max-width:60%; }
  .view-desktop .banner .bemoji{ font-size:180px; right:20px; bottom:-40px; }

  .view-desktop .sec-head{ padding:0; margin:34px 0 16px; }
  .view-desktop .sec-head h2{ font-size:21px; }
  .view-desktop .sec-head .more{ cursor:pointer; font-size:13.5px; }

  .view-desktop .cat-grid{ grid-template-columns:repeat(8,1fr); padding:0; gap:14px; }
  .view-desktop .cat-item .ic{ height:82px; font-size:32px; border-radius:20px; cursor:pointer; }
  .view-desktop .cat-item span{ font-size:12px; }
  .view-desktop .seg-grid{ grid-template-columns:repeat(4,1fr); padding:0; gap:14px; }
  .view-desktop .seg-card{ cursor:pointer; }
  .view-desktop .cat-row{ margin:0 0 12px; cursor:pointer; }

  /* carrosséis viram grades */
  .view-desktop .hscroll{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:16px; overflow:visible; padding:0;
  }
  .view-desktop .hscroll > *{ width:auto; cursor:pointer; }
  .view-desktop .spon-card .cover{ height:120px; }
  .view-desktop .promo-card .cover{ height:130px; }
  .view-desktop .promo-card h4{ font-size:13.5px; height:auto; min-height:36px; }
  /* a fila de filtros continua em linha */
  .view-desktop .screen > .hscroll:has(> .chip){ display:flex; flex-wrap:wrap; }

  .view-desktop .emp-card{ cursor:pointer; }
  .view-desktop .emp-card .logo{ width:68px; height:68px; font-size:31px; }
  .view-desktop .emp-card h3{ font-size:16.5px; }

  .view-desktop .prod{ margin:0 0 18px; cursor:pointer; }
  .view-desktop .prod .pic{ width:104px; height:104px; font-size:42px; }
  .view-desktop .prod h4{ font-size:15px; }
  .view-desktop .prod p{ font-size:12.5px; }
  .view-desktop .store-tabs{ padding:20px 0 12px; }
  .view-desktop .store-head{ padding:24px 32px; }
  .view-desktop .store-info{ max-width:460px; }

  .view-desktop .emp-banner{ height:230px; }
  .view-desktop .emp-banner .navbtns{ left:32px; right:32px; top:20px; }
  .view-desktop .emp-head{ margin:-46px 0 0; padding:22px 26px; }
  .view-desktop .quick-actions{ grid-template-columns:repeat(8,1fr) !important; padding:20px 0 0; }
  .view-desktop .qa{ cursor:pointer; }

  .view-desktop .map{ height:220px; }
  .view-desktop .wpp-preview{ margin:18px 0; padding:26px; }
  .view-desktop .bubble{ max-width:600px; margin-left:0; font-size:13.5px; }
  .view-desktop .msg-actions{ padding:0; max-width:600px; }
  .view-desktop .wow-strip{ margin:18px 0; padding:22px; }
  .view-desktop .success-hero{ padding:48px 24px 12px; }

  .view-desktop .stats{ grid-template-columns:repeat(4,1fr); }
  .view-desktop .panel-menu{ grid-template-columns:repeat(4,1fr); padding:20px 0 0; }
  .view-desktop .panel-top{ padding:26px 32px; }
  .view-desktop .plan{ margin-bottom:0; }
  .view-desktop .screen > div:has(> .plan){ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:0; }

  /* barra de ação fica no rodapé da janela, pois a navegação subiu */
  .view-desktop .bottom-bar{ bottom:0; padding:16px 32px; }
  .view-desktop .bottom-bar .btn{ flex:none; }
  .view-desktop .bottom-bar .btn-primary,
  .view-desktop .bottom-bar .btn-wpp{ min-width:320px; margin-left:auto; }
  .view-desktop .emp-banner .bemoji{ bottom:42px; right:28px; font-size:130px; }

  /* folha e aviso continuam ancorados no rodapé da janela */
  .view-desktop .sheet{ left:50%; transform:translate(-50%,100%); width:520px; border-radius:26px 26px 0 0; }
  .view-desktop .sheet.show{ transform:translate(-50%,0); }
  .view-desktop .toast{ bottom:26px; }
}