/* =====================================================================
   CENTRAL PHONE — Folha de estilo
   Tema 1 (dark):  preto com detalhes verdes
   Tema 2 (light): branco com detalhes verdes
   ===================================================================== */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
ol, ul { list-style: none; }
[hidden] { display: none !important; }

/* ---------- TOKENS ---------- */
:root {
  --g-300: #a8ffd4;
  --g-400: #5bffa5;
  --g-500: #22f08a;
  --g-600: #00e57a;
  --g-700: #00bf66;
  --g-800: #00954f;
  --g-900: #00703c;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* letra de titulo: mais redonda e mais larga que a Inter, para nomes curtos */
  --font-titulo: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-xs: 9px;
  --r-sm: 13px;
  --r-md: 19px;
  --r-lg: 27px;
  --r-xl: 36px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --swift: cubic-bezier(.76, 0, .24, 1);

  --maxw: 1260px;
  --topbar-h: 0px;   /* o cliente nao tem mais barra no topo */
  --vt-solido: rgba(8, 12, 15, .965);
  --adm-lado: 234px;
}

html[data-theme="dark"] {
  --bg: #04070a;
  --bg-2: #080d11;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .08);
  --surface-3: rgba(255, 255, 255, .12);
  --surface-solid: #0b1115;
  --glass: rgba(13, 19, 23, .6);
  --glass-forte: rgba(10, 15, 19, .82);
  --glass-brd: rgba(255, 255, 255, .11);
  --glass-hl: rgba(255, 255, 255, .22);
  --line: rgba(255, 255, 255, .09);
  --line-forte: rgba(255, 255, 255, .16);
  --txt: #eef4f1;
  --txt-2: #9bb0a8;
  --txt-3: #647872;
  --accent: var(--g-600);
  --accent-2: var(--g-400);
  --accent-ink: #03150b;
  --accent-soft: rgba(0, 229, 122, .14);
  --accent-glow: rgba(0, 229, 122, .32);
  --shadow: 0 28px 70px -22px rgba(0, 0, 0, .88);
  --shadow-sm: 0 12px 32px -14px rgba(0, 0, 0, .8);
  --shadow-lg: 0 46px 100px -34px rgba(0, 0, 0, .92);
  --img-bg: linear-gradient(145deg, #121a1e, #070b0d);
  --warn: #ff6b6b;
  --adm-bg: #06090c;
  --adm-lado-bg: #0a1014;
  --tk-bg: #05080a;
  --tk-cheio: #ffffff;
  --tk-vazio: rgba(255,255,255,.3);
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f2f6f4;
  --bg-2: #ffffff;
  --surface: rgba(8, 36, 24, .042);
  --surface-2: rgba(8, 36, 24, .075);
  --surface-3: rgba(8, 36, 24, .11);
  --surface-solid: #ffffff;
  --glass: rgba(255, 255, 255, .74);
  --glass-forte: rgba(255, 255, 255, .92);
  --glass-brd: rgba(8, 44, 28, .11);
  --glass-hl: rgba(255, 255, 255, .95);
  --line: rgba(8, 44, 28, .11);
  --line-forte: rgba(8, 44, 28, .2);
  --txt: #07140e;
  --txt-2: #4b5f56;
  --txt-3: #7a8d84;
  --accent: var(--g-800);
  --accent-2: var(--g-700);
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 149, 79, .1);
  --accent-glow: rgba(0, 149, 79, .22);
  --shadow: 0 28px 70px -28px rgba(6, 40, 25, .3);
  --shadow-sm: 0 12px 30px -16px rgba(6, 40, 25, .26);
  --shadow-lg: 0 46px 100px -40px rgba(6, 40, 25, .35);
  --img-bg: linear-gradient(145deg, #eef3f1, #ffffff);
  --warn: #d93c3c;
  --adm-bg: #edf2f0;
  --adm-lado-bg: #ffffff;
  --tk-bg: #ffffff;
  --tk-cheio: #07140e;
  --tk-vazio: rgba(7,20,14,.26);
  color-scheme: light;
  --vt-solido: rgba(255, 255, 255, .965);
}

html, body { min-height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .55s var(--ease), color .55s var(--ease);
}
body.locked, body.splashing { overflow: hidden; }
::selection { background: var(--accent); color: var(--accent-ink); }
svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* =====================================================================
   FUNDO
   ===================================================================== */
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .5; }
.o1 { width: 46vw; height: 46vw; left: -12vw; top: -12vw; background: radial-gradient(circle, var(--accent-glow), transparent 70%); animation: flut1 24s var(--ease-io) infinite; }
.o2 { width: 40vw; height: 40vw; right: -12vw; top: 26vh; background: radial-gradient(circle, var(--accent-glow), transparent 70%); opacity: .32; animation: flut2 30s var(--ease-io) infinite; }
.o3 { width: 32vw; height: 32vw; left: 32vw; bottom: -16vw; background: radial-gradient(circle, var(--accent-glow), transparent 70%); opacity: .2; animation: flut1 36s var(--ease-io) infinite reverse; }
@keyframes flut1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6vw,5vh,0) scale(1.15); } }
@keyframes flut2 { 0%,100% { transform: translate3d(0,0,0) scale(1.06); } 50% { transform: translate3d(-7vw,-6vh,0) scale(.9); } }
.malha {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
  opacity: .45;
}
.noise {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .035; mix-blend-mode: overlay;
}
html[data-theme="light"] .noise { opacity: .018; }

.spotlight {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 70%);
  transition: opacity .6s var(--ease);
}
@media (hover: hover) and (min-width: 900px) { .spotlight.on { opacity: 1; } }

/* =====================================================================
   TELA DE CARREGAMENTO
   ===================================================================== */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; grid-template-rows: 1fr auto auto;
  background: radial-gradient(ellipse at 50% 40%, #0b1318 0%, #05080b 58%, #000 100%);
  overflow: hidden; will-change: transform;
}
.splash.done { animation: spSai 1.1s var(--swift) forwards; pointer-events: none; }
@keyframes spSai {
  0%   { transform: translateY(0) scale(1); border-radius: 0; }
  18%  { transform: translateY(1.4%) scale(.995); border-radius: 0 0 34px 34px; }
  100% { transform: translateY(-101%) scale(.985); border-radius: 0 0 34px 34px; }
}
.splash.done .sp-palco { animation: spPalcoSai .55s var(--ease) forwards; }
@keyframes spPalcoSai { to { opacity: 0; transform: translateY(-22px) scale(.97); filter: blur(4px); } }
.splash.done .sp-rodape, .splash.done .sp-linha { animation: spSome .3s var(--ease) forwards; }
@keyframes spSome { to { opacity: 0; } }

/* ceu */
.sp-ceu { position: absolute; inset: 0; overflow: hidden; }
.sp-halo {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%);
  width: 64vmin; height: 64vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,122,.26), transparent 66%);
  filter: blur(60px); animation: spRespira 6s var(--ease-io) infinite;
}
.sp-halo.b { width: 40vmin; height: 40vmin; background: radial-gradient(circle, rgba(140,255,205,.16), transparent 68%); animation-duration: 8s; animation-delay: 1.4s; }
@keyframes spRespira { 0%,100% { opacity: .5; transform: translate(-50%,-50%) scale(.94); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }

.sp-poeira { position: absolute; inset: 0; }
.sp-poeira i {
  position: absolute; bottom: -8px; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(190,255,225,.9); box-shadow: 0 0 6px rgba(0,229,122,.8);
  animation: spSobeP linear infinite;
}
@keyframes spSobeP {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .75; }
  90%  { opacity: .4; }
  100% { transform: translateY(-104vh) translateX(18px); opacity: 0; }
}
.sp-poeira i:nth-child(1)  { left: 7%;  animation-duration: 16s; animation-delay: .2s; }
.sp-poeira i:nth-child(2)  { left: 15%; animation-duration: 21s; animation-delay: 2.4s; }
.sp-poeira i:nth-child(3)  { left: 23%; animation-duration: 18s; animation-delay: 1.1s; }
.sp-poeira i:nth-child(4)  { left: 31%; animation-duration: 24s; animation-delay: 3.6s; }
.sp-poeira i:nth-child(5)  { left: 39%; animation-duration: 15s; animation-delay: .7s; }
.sp-poeira i:nth-child(6)  { left: 47%; animation-duration: 20s; animation-delay: 4.2s; }
.sp-poeira i:nth-child(7)  { left: 54%; animation-duration: 17s; animation-delay: 1.8s; }
.sp-poeira i:nth-child(8)  { left: 62%; animation-duration: 23s; animation-delay: 3.1s; }
.sp-poeira i:nth-child(9)  { left: 70%; animation-duration: 19s; animation-delay: .4s; }
.sp-poeira i:nth-child(10) { left: 78%; animation-duration: 22s; animation-delay: 2.8s; }
.sp-poeira i:nth-child(11) { left: 85%; animation-duration: 16s; animation-delay: 5s; }
.sp-poeira i:nth-child(12) { left: 92%; animation-duration: 25s; animation-delay: 1.5s; }
.sp-poeira i:nth-child(13) { left: 11%; animation-duration: 19s; animation-delay: 6.2s; }
.sp-poeira i:nth-child(14) { left: 66%; animation-duration: 21s; animation-delay: 7s; }

.sp-feixe {
  position: absolute; top: -20%; bottom: -20%; width: 180px; left: -220px;
  background: linear-gradient(100deg, transparent, rgba(160,255,215,.09), transparent);
  filter: blur(8px); animation: spVarre 7s var(--ease-io) 1.2s infinite;
}
@keyframes spVarre { 0% { left: -220px; } 55%, 100% { left: 108%; } }

/* palco */
.sp-palco { position: relative; z-index: 2; display: grid; justify-items: center; padding: 24px; text-align: center; align-self: center; }

.sp-anel { position: relative; width: 124px; height: 124px; display: grid; place-items: center; margin-bottom: 36px; }
.sp-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.sp-trilho { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1.5; }
.sp-arco {
  fill: none; stroke: url(#spG); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  filter: drop-shadow(0 0 6px rgba(0,229,122,.7));
  transition: stroke-dashoffset .5s var(--ease);
}
.sp-pontilhado { fill: none; stroke: rgba(0,229,122,.22); stroke-width: 1; stroke-dasharray: 1 7; transform-origin: 60px 60px; animation: spGira 26s linear infinite; }
@keyframes spGira { to { transform: rotate(360deg); } }

.sp-mark { width: 58px; position: relative; z-index: 2; filter: drop-shadow(0 0 16px rgba(0,229,122,.45)); animation: spMarca 1.1s var(--spring) both; }
@keyframes spMarca { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
.sp-corpo { stroke-dasharray: 210; stroke-dashoffset: 210; animation: spDesenha 1.6s var(--ease) .2s forwards; }
@keyframes spDesenha { to { stroke-dashoffset: 0; } }
.sp-ilha { opacity: 0; animation: spApareceu .6s var(--ease) 1s forwards; }
@keyframes spApareceu { to { opacity: 1; } }
.sp-onda { opacity: 0; animation: spBlip 2.6s var(--ease-io) 1.3s infinite; }
.sp-onda.d1 { animation-delay: 1.55s; }
.sp-ponto { animation: spPontoPisca 2.6s var(--ease-io) 1.1s infinite; }
@keyframes spBlip { 0%, 74%, 100% { opacity: .1; } 20% { opacity: 1; } }
@keyframes spPontoPisca { 0%,100% { opacity: .3; } 22% { opacity: 1; } }

.sp-nome {
  font-size: clamp(27px, 6.6vw, 50px); font-weight: 300; line-height: 1.05;
  color: rgba(255,255,255,.95); white-space: nowrap;
  opacity: 0; letter-spacing: .46em; margin-right: -.46em;
  clip-path: inset(0 100% 0 0);
  animation: spRevela 1.6s var(--ease) .55s forwards;
}
.sp-nome em { font-style: normal; font-weight: 700; color: var(--g-500); }
@keyframes spRevela {
  to { opacity: 1; letter-spacing: .02em; margin-right: -.02em; clip-path: inset(0 0 0 0); }
}

.sp-risco { display: block; width: 0; height: 1px; margin-top: 22px; background: linear-gradient(90deg, transparent, var(--g-600), transparent); animation: spRisco 1.4s var(--ease) 1.5s forwards; }
@keyframes spRisco { to { width: min(320px, 72vw); } }

.sp-tag { margin-top: 20px; color: rgba(255,255,255,.38); font-size: clamp(10px, 1.6vw, 12px); letter-spacing: .3em; text-transform: uppercase; opacity: 0; animation: spSobeTexto 1s var(--ease) 1.9s forwards; }
@keyframes spSobeTexto { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.sp-rodape {
  position: relative; z-index: 2; width: min(360px, 78vw); margin: 0 auto 14px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.34);
  opacity: 0; animation: spSobeTexto .9s var(--ease) 2.1s forwards;
}
.sp-pct { color: var(--g-500); font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-linha { position: relative; z-index: 2; width: 100%; height: 2px; background: rgba(255,255,255,.06); }
.sp-linha span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--g-800), var(--g-400)); box-shadow: 0 0 12px var(--g-600); transition: width .5s var(--ease); }

/* =====================================================================
   CARREGAMENTO REUTILIZAVEL (painel, publicacao)
   ===================================================================== */
.tela-load { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; opacity: 0; transition: opacity .4s var(--ease); }
.tela-load.on { opacity: 1; }
.tl-fundo { position: absolute; inset: 0; background: rgba(4,7,10,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-theme="light"] .tl-fundo { background: rgba(236,242,239,.86); }
.tl-caixa {
  position: relative; display: grid; justify-items: center; gap: 4px;
  padding: 36px 40px 30px; border-radius: var(--r-xl);
  background: var(--glass-forte); border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  box-shadow: var(--shadow-lg); text-align: center;
  transform: scale(.94) translateY(10px); transition: transform .5s var(--spring);
}
.tela-load.on .tl-caixa { transform: none; }
.tl-anel { position: relative; width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 16px; }
.tl-anel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-trilho { fill: none; stroke: var(--surface-2); stroke-width: 3; }
.tl-gira { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 54 160; transform-origin: 40px 40px; animation: spGira 1.1s linear infinite; }
.tl-mark { width: 30px; color: var(--accent); position: relative; z-index: 2; animation: tlPulsa 2s var(--ease-io) infinite; }
@keyframes tlPulsa { 0%,100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.tl-caixa b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.tl-caixa small { font-size: 13px; color: var(--txt-2); }
.tl-barra { width: 190px; height: 3px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 16px; }
.tl-barra span { display: block; height: 100%; width: 40%; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: tlCorre 1.3s var(--ease-io) infinite; }
@keyframes tlCorre { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }
.tl-passos { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 18px; }
.tl-passos li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--txt-3); transition: all .4s var(--ease); }
.tl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3); transition: all .4s var(--spring); }
.tl-passos li.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.tl-passos li.on .tl-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); transform: scale(1.2); }

/* barra fina de progresso ao trocar de pagina */
.rota-prog { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 1400; pointer-events: none; }
.rota-prog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--g-700), var(--g-400)); box-shadow: 0 0 10px var(--accent-glow); transition: width .35s var(--ease), opacity .3s; }
.rota-prog span.fim { opacity: 0; }

/* =====================================================================
   VIDRO
   ===================================================================== */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hl), inset 0 -1px 0 rgba(0,0,0,.14);
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.14), transparent 38%, transparent 70%, rgba(255,255,255,.05));
}
.glass-card {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  backdrop-filter: blur(24px) saturate(175%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hl);
  padding: 28px;
}

/* =====================================================================
   BARRA SUPERIOR
   ===================================================================== */
.topbar { position: fixed; top: 10px; left: 0; right: 0; z-index: 500; padding: 0 16px; display: flex; justify-content: center; transition: transform .5s var(--ease), top .4s var(--ease); }
.topbar.hide { transform: translateY(-170%); }
.topbar-inner { width: 100%; max-width: var(--maxw); height: 58px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 12px; padding: 0 8px 0 14px; transition: height .4s var(--ease), box-shadow .4s var(--ease); }
.topbar.scrolled .topbar-inner { height: 52px; box-shadow: 0 20px 48px -22px rgba(0,0,0,.72), inset 0 1px 0 var(--glass-hl); }

.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; transition: transform .35s var(--spring); }
.brand:active { transform: scale(.95); }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--accent-ink); background: linear-gradient(145deg, var(--g-400), var(--g-700)); box-shadow: 0 6px 18px -6px var(--accent-glow); }
.brand-mark svg { width: 18px; stroke-width: 3.4; }
.brand-text { font-weight: 800; letter-spacing: -.025em; font-size: 17px; white-space: nowrap; }
.brand-text em { font-style: normal; color: var(--accent); }

.nav-pill { position: relative; display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 4px; border-radius: var(--r-pill); background: var(--surface); }
.nav-pill a { position: relative; z-index: 2; padding: 7px 15px; border-radius: var(--r-pill); font-size: 14px; font-weight: 550; color: var(--txt-2); white-space: nowrap; transition: color .3s var(--ease), transform .3s var(--spring); }
.nav-pill a:hover { color: var(--txt); }
.nav-pill a.on { color: var(--accent-ink); }
.nav-pill a:active { transform: scale(.94); }
.nav-indicator { position: absolute; z-index: 1; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: var(--r-pill); background: linear-gradient(145deg, var(--g-500), var(--g-700)); box-shadow: 0 6px 18px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .55s var(--spring), width .55s var(--spring), opacity .3s; opacity: 0; }
.nav-indicator.show { opacity: 1; }

.topbar-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.status-loja { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; margin-right: 4px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; font-weight: 650; color: var(--txt-2); white-space: nowrap; }
.status-loja i { width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3); flex-shrink: 0; }
.status-loja.aberto { color: var(--accent); border-color: var(--accent-glow); }
.status-loja.aberto i { background: var(--accent); animation: pulsar 2.2s var(--ease-io) infinite; }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.icon-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--txt-2); transition: background .3s, color .3s, transform .3s var(--spring); }
.icon-btn svg { width: 19px; }
.icon-btn:hover { background: var(--surface-2); color: var(--txt); }
.icon-btn:active { transform: scale(.88); }
.badge { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 800; display: grid; place-items: center; animation: surge .4s var(--spring); }
@keyframes surge { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

.theme-btn .ic-sun, .theme-btn .ic-moon { position: absolute; transition: opacity .4s var(--ease), transform .55s var(--spring); }
html[data-theme="dark"] .theme-btn .ic-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
html[data-theme="dark"] .theme-btn .ic-moon { opacity: 1; transform: none; }
html[data-theme="light"] .theme-btn .ic-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
html[data-theme="light"] .theme-btn .ic-sun { opacity: 1; transform: none; }

.burger { display: grid; gap: 4px; }
.burger i { display: block; width: 17px; height: 1.9px; border-radius: 2px; background: currentColor; transition: transform .4s var(--spring), opacity .3s, width .3s; }
.burger i:nth-child(2) { width: 12px; }
.menu-btn:hover .burger i:nth-child(2) { width: 17px; }

/* =====================================================================
   LAYOUT E TIPOGRAFIA
   ===================================================================== */
#app { --recuo: 20px; position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 26px var(--recuo) 40px; }
.view { display: none; }
.view.on { display: block; animation: entraView .65s var(--ease) both; }
@keyframes entraView { from { opacity: 0; transform: translateY(20px) scale(.994); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.block { margin-top: 78px; }
.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
h1 { font-size: clamp(31px, 5.4vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
h2 { font-size: clamp(23px, 3.4vw, 32px); font-weight: 750; letter-spacing: -.028em; line-height: 1.14; }
h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -.015em; }
.muted { color: var(--txt-2); font-size: 13.5px; }
.grad { background: linear-gradient(100deg, var(--accent-2), var(--accent) 55%, var(--g-700)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-head { margin-bottom: 30px; max-width: 760px; }
.page-head p { color: var(--txt-2); margin-top: 10px; font-size: 15.5px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 14px; }
.link-arrow svg { width: 16px; transition: transform .35s var(--spring); }
.link-arrow:hover svg { transform: translateX(4px); }

/* =====================================================================
   BOTOES E CAMPOS
   ===================================================================== */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; border: 1px solid transparent; transition: transform .3s var(--spring), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s; }
.btn svg { width: 17px; }
.btn:active { transform: scale(.955); }
.btn-lg { padding: 14px 26px; font-size: 15.5px; }
.btn-sm { padding: 8px 15px; font-size: 13px; }
.btn-primary { background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink); box-shadow: 0 14px 34px -14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-primary:hover { box-shadow: 0 22px 46px -14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.42); transform: translateY(-2px); }
.btn-ghost { background: var(--surface); color: var(--txt); border-color: var(--glass-brd); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }
.btn-ghost.danger { color: var(--warn); }
.btn-ghost.danger:hover { border-color: var(--warn); color: var(--warn); background: rgba(255,107,107,.1); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.4); animation: ripple .65s var(--ease-io) forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 11px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--glass-brd); font-size: 12.5px; font-weight: 600; color: var(--txt-2); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulsar 2.2s var(--ease-io) infinite; }

.field { display: grid; gap: 7px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--txt-2); }
.field > span b { color: var(--accent); }
.field input, .field textarea, .select { width: 100%; padding: 11px 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); color: var(--txt); font-size: 14.5px; transition: border-color .3s, box-shadow .3s, background .3s; }
.field textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.field input:focus, .field textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface-2); }
.select { appearance: none; cursor: pointer; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300bf66' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 5px; border-radius: 99px; padding: 0; background: var(--surface-2); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(145deg, var(--g-400), var(--g-700)); border: 2px solid var(--bg-2); box-shadow: 0 2px 10px var(--accent-glow); transition: transform .25s var(--spring); }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.25); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--bg-2); border-radius: 50%; background: var(--accent); }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--txt-2); cursor: pointer; white-space: nowrap; }

.search-wrap { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.search-wrap svg { position: absolute; left: 14px; width: 17px; color: var(--txt-3); pointer-events: none; }
.search-wrap input { width: 100%; padding: 12px 14px 12px 40px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; transition: border-color .3s, box-shadow .3s; }
.search-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search-wrap.small input { padding: 9px 12px 9px 36px; font-size: 13.5px; }
.search-wrap.big input { padding: 17px 48px 17px 46px; font-size: 16.5px; border: 0; background: transparent; box-shadow: none !important; }
.search-wrap.big svg { left: 18px; width: 20px; }
.search-wrap.big .icon-btn { position: absolute; right: 8px; }

.seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); }
.seg button { padding: 8px 15px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--txt-2); white-space: nowrap; transition: all .35s var(--ease); }
.seg button:hover { color: var(--txt); }
.seg button.on { background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink); box-shadow: 0 5px 16px -6px var(--accent-glow); }
.scroller { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.scroller::-webkit-scrollbar { display: none; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; min-height: min(80vh, 700px); padding: 24px 0 10px; }
@supports (height: 100dvh) { .hero { min-height: min(80dvh, 700px); } }
.hero-aura { position: absolute; left: -12%; top: -24%; width: 76%; height: 150%; background: radial-gradient(ellipse at center, var(--accent-glow), transparent 62%); filter: blur(70px); opacity: .5; pointer-events: none; }
.hero-inner { position: relative; display: grid; gap: 18px; justify-items: start; }
.hero-title { font-size: clamp(36px, 6.6vw, 70px); }
.hero-sub { color: var(--txt-2); font-size: clamp(15px, 1.7vw, 18px); max-width: 52ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.ic-wpp { color: var(--accent); }
.hero-stats { display: flex; gap: 32px; margin-top: 18px; flex-wrap: wrap; }
.hero-stats div { display: grid; }
.hero-stats strong { font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: 12.5px; color: var(--txt-3); }

.hero-scroll { position: absolute; bottom: -4px; left: 0; display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.hero-scroll span { width: 20px; height: 32px; border-radius: 99px; border: 1.5px solid var(--line-forte); position: relative; }
.hero-scroll span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 6px; border-radius: 2px; margin-left: -1.5px; background: var(--accent); animation: rolinha 2s var(--ease-io) infinite; }
@keyframes rolinha { 0%,100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(10px); opacity: .2; } }

/* =====================================================================
   O NOME DA LOJA NO LUGAR DO APARELHO
   So o nome. Ele fica parado: nada de inclinar com o ponteiro nem de
   flutuar. O que se mexe e a luz que atravessa as letras e a entrada
   delas, uma de cada vez.
   ===================================================================== */
/* O angulo precisa ser registrado para poder ser animado. Sem isto o
   navegador trata a conica como texto cru e as luzes ficam paradas. */
@property --mv-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.hero-art { display: grid; place-items: center; perspective: 1200px; }
.marca-loja {
  position: relative; display: grid; place-items: center;
  width: 100%; max-width: 560px; padding: 36px 10px;
}

/* ---- as luzes atras do nome ----
   Uma conica desfocada: os claros dela viram feixes que passam devagar
   por tras das letras. Quem gira e a luz; o nome nao sai do lugar. */
.mv-luzes {
  position: absolute; z-index: 0; left: 50%; top: 50%; pointer-events: none;
  width: 125%; aspect-ratio: 1; max-width: 560px;
  transform: translate(-50%, -50%);
  background: conic-gradient(from var(--mv-ang),
    transparent 0 6%, var(--accent-glow) 20%, transparent 34% 50%,
    var(--accent-soft) 60%, transparent 72% 84%, var(--accent-glow) 94%, transparent 100%);
  filter: blur(48px); opacity: .9;
  animation: mvGira 20s linear infinite;
}
@keyframes mvGira { to { --mv-ang: 360deg; } }

.mv-nome {
  position: relative; z-index: 1; margin: 0; text-align: center;
  font-family: var(--font-titulo);
  font-size: clamp(46px, 7.6vw, 104px); font-weight: 800;
  letter-spacing: -.05em; line-height: .92;
}
.mv-linha { display: block; white-space: nowrap; }
.mv-vao { display: inline-block; width: .26em; }

/* cada letra e um plano proprio: e assim que ela consegue vir deitada */
.mv-l {
  display: inline-block; transform-origin: 50% 90%;
  background-image: linear-gradient(168deg, var(--txt) 18%, var(--txt-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mv-linha.forte .mv-l { background-image: linear-gradient(168deg, var(--g-500) 10%, var(--g-700)); }

/* a entrada so comeca quando o hero entra em cena, junto com o resto */
.hero-art.in .mv-l { animation: mvLetra .95s var(--spring) both; animation-delay: calc(.25s + var(--l, 0) * .055s); }
@keyframes mvLetra {
  from { opacity: 0; transform: translateY(.55em) rotateX(-82deg) scale(.86); filter: blur(10px); }
  55%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* A LUZ QUE ATRAVESSA O NOME
   Uma copia exata por cima. Cada letra recebe a largura da palavra em
   background-size e o seu proprio deslocamento em background-position:
   as fatias se somam num gradiente so, e o claro corre pela palavra
   inteira em vez de acender letra por letra. */
.mv-eco { position: absolute; inset: 0; pointer-events: none; }
/* como quase tudo na camada e transparente, so a faixa acende — e e ela
   que fica com o halo */
.mv-eco .mv-linha { filter: drop-shadow(0 0 14px var(--accent-glow)); }
.mv-eco .mv-l {
  background-image: linear-gradient(104deg,
    transparent 0 36%, rgba(169, 255, 214, .45) 43%, #ffffff 50%,
    rgba(169, 255, 214, .45) 57%, transparent 64% 100%);
  background-repeat: no-repeat;
  background-size: var(--larg, 100%) 100%;
  background-position: calc(var(--off, 0px) * -1) 0;
}
.hero-art.in .mv-eco .mv-l {
  animation: mvLetra .95s var(--spring) both, mvLuz 5.2s var(--ease-io) 1.6s infinite;
  animation-delay: calc(.25s + var(--l, 0) * .055s), 1.6s;
}
@keyframes mvLuz {
  0%        { background-position: calc(var(--off, 0px) * -1 - var(--larg, 0px) * .75) 0; }
  58%, 100% { background-position: calc(var(--off, 0px) * -1 + var(--larg, 0px) * 1.75) 0; }
}
/* No claro a faixa branca sumia: letra escura em fundo claro nao tem
   para onde clarear. Ali quem passa e o verde. */
html[data-theme="light"] .mv-eco .mv-l {
  background-image: linear-gradient(104deg,
    transparent 0 36%, rgba(0, 149, 79, .4) 43%, var(--g-700) 50%,
    rgba(0, 149, 79, .4) 57%, transparent 64% 100%);
}

/* Movimento reduzido: as letras ficam onde estao e a faixa sai de cena —
   parada, ela viraria uma mancha fixa no meio da palavra. */
@media (prefers-reduced-motion: reduce) {
  .mv-eco { display: none; }
  .mv-l { filter: none; }
  .mv-luzes { animation: none; }
}




/* =====================================================================
   FAIXA DE MARCAS (ticker)
   ===================================================================== */
.ticker {
  position: relative;
  margin-top: 56px;
  /* sangra ate a borda da tela. --sb e a largura da barra de rolagem, medida
     no JS: sem isso o 100vw inclui a barra e cria rolagem horizontal. */
  margin-left: calc(50% - 50vw + var(--sb, 0px) / 2);
  margin-right: calc(50% - 50vw + var(--sb, 0px) / 2);
  padding: 15px 0;
  background: var(--tk-bg);
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  overflow: hidden;
}
.ticker-track {
  display: flex; align-items: center; width: max-content;
  gap: clamp(16px, 2.4vw, 32px);
  animation: desfila 32s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes desfila { to { transform: translateX(-50%); } }

.tk-palavra {
  font-size: clamp(21px, 3.4vw, 38px);
  font-weight: 900; letter-spacing: -.015em; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  color: var(--tk-cheio);
}
.tk-palavra.vazada {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--tk-vazio);
}
/* se o navegador nao desenha contorno de texto, o vazado vira cinza cheio */
@supports not ((-webkit-text-stroke: 1px red)) {
  .tk-palavra.vazada { color: var(--tk-vazio); -webkit-text-stroke: 0; }
}

.tk-estrela { flex-shrink: 0; width: clamp(15px, 2vw, 22px); color: var(--accent); }
.tk-estrela svg { width: 100%; fill: currentColor; stroke: none; }

/* =====================================================================
   CATEGORIAS
   ===================================================================== */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 14px; }
.cat { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 20px 18px; text-align: left; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); transition: transform .45s var(--spring), border-color .35s, box-shadow .4s; }
.cat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, var(--accent-soft), transparent 65%); opacity: 0; transition: opacity .4s; }
.cat:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 22px 44px -24px var(--accent-glow); }
.cat:hover::before { opacity: 1; }
.cat-ico { font-size: 25px; line-height: 1; margin-bottom: 8px; transition: transform .45s var(--spring); }
.cat:hover .cat-ico { transform: scale(1.18) rotate(-8deg); }
.cat b { font-size: 15px; font-weight: 650; position: relative; }
.cat small { color: var(--txt-3); font-size: 12.5px; position: relative; }

/* =====================================================================
   CARDS DE PRODUTO
   ===================================================================== */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 18px; }
.prod-grid.compacta { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.prod { position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-brd); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; opacity: 0; transform: translateY(26px); animation: entraCard .7s var(--ease) forwards; }
@keyframes entraCard { to { opacity: 1; transform: none; } }
.prod:hover { transform: translateY(-9px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-glow); border-color: var(--accent); }
.prod-media { position: relative; aspect-ratio: 1/1; background: var(--img-bg); overflow: hidden; display: grid; place-items: center; }
.prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .85s var(--ease); }
.prod:hover .prod-media img { transform: scale(1.1); }
.prod-media .ph { font-size: 54px; opacity: .3; }
.prod-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 52%); opacity: 0; transition: opacity .4s; }
.prod:hover .prod-media::after { opacity: 1; }
.prod-tags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; z-index: 2; max-width: calc(100% - 54px); }
.prod-tags .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { padding: 4px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tag.novo { background: var(--accent); color: var(--accent-ink); }
.tag.semi { background: rgba(80,170,255,.92); color: #021425; }
.tag.usado { background: rgba(255,190,70,.94); color: #241800; }
.tag.off { background: #ff4d6d; color: #fff; }
.tag.esgotado { background: rgba(120,120,120,.92); color: #fff; }
.tag.ultima { background: rgba(255,120,40,.94); color: #fff; }

.prod-acoes-topo { position: absolute; top: 9px; right: 9px; z-index: 3; display: grid; gap: 6px; }
.prod-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; transition: transform .35s var(--spring), background .3s, color .3s, opacity .3s; opacity: 0; }
html[data-theme="light"] .prod-ico { background: rgba(255,255,255,.78); color: var(--txt-2); }
.prod-ico svg { width: 17px; }
.prod:hover .prod-ico, .prod-ico.on { opacity: 1; }
.prod-ico:hover { transform: scale(1.1); }
.prod-ico.on { color: var(--accent); }
.prod-ico.fav.on svg { fill: var(--accent); }
@media (hover: none) { .prod-ico { opacity: 1; } }

.prod-body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prod-cat { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.prod-name { font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em; }
.prod-specs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; min-height: 21px; }
.spec { padding: 3px 8px; border-radius: 7px; background: var(--surface-2); font-size: 11px; color: var(--txt-2); font-weight: 550; }
.prod-price { margin-top: 11px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.prod-price b { font-size: 21px; font-weight: 800; letter-spacing: -.035em; }
.prod-price s { font-size: 12.5px; color: var(--txt-3); }
.prod-parc { font-size: 12px; color: var(--accent); font-weight: 600; }
.prod-actions { margin-top: auto; padding-top: 13px; display: flex; gap: 7px; }
.prod-actions .btn { flex: 1; padding: 9px 12px; font-size: 13px; }
.prod-actions .btn.add { flex: 0 0 40px; padding: 9px 0; font-size: 17px; }

.sk { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.sk-media { aspect-ratio: 1/1; background: var(--surface-2); position: relative; overflow: hidden; }
.sk-linha { height: 11px; border-radius: 6px; background: var(--surface-2); margin: 12px 16px; position: relative; overflow: hidden; }
.sk-linha.curta { width: 50%; }
.sk-linha.media { width: 76%; }
.sk-media::after, .sk-linha::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--surface-3), transparent); animation: brilhaSk 1.4s linear infinite; }
@keyframes brilhaSk { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* =====================================================================
   HOME — GAVETAS, TRILHOS E A LOJA FISICA
   ===================================================================== */
.gavetas { display: grid; gap: 9px; }

/* ultimo item do trilho: o atalho para a vitrine da categoria */
.trilho-fim {
  flex: 0 0 auto; width: 128px; align-self: stretch;
  display: grid; place-content: center; justify-items: center; gap: 4px;
  border-radius: var(--r-lg); border: 1px dashed var(--line-forte);
  background: var(--surface); color: var(--txt-2);
  transition: border-color .35s, color .35s, transform .4s var(--spring), background .35s;
}
.trilho-fim span { font-size: 12.5px; font-weight: 600; }
.trilho-fim b { font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: var(--txt); }
.trilho-fim svg { width: 18px; margin-top: 2px; }
.trilho-fim:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-3px); }
.trilho-fim:hover b { color: var(--accent); }

/* ---- comprar aqui: passos + garantias num bloco so ---- */
.comprar-aqui { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: start; }

.passos { display: grid; gap: 2px; list-style: none; counter-reset: none; }
.passo {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 14px 4px; border: 0; background: none; border-radius: 0;
  position: relative;
}
.passo + .passo { border-top: 1px solid var(--line); }
.passo .pnum {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  transition: transform .5s var(--spring), background .4s;
}
.passo:hover .pnum { transform: scale(1.08) rotate(-6deg); background: var(--accent); color: var(--accent-ink); }
.passo h3 { margin: 0 0 3px; font-size: 15px; }
.passo p { color: var(--txt-2); font-size: 13px; line-height: 1.45; }

.garantias { display: grid; gap: 9px; list-style: none; }
.garantias li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 13px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .35s, transform .4s var(--spring);
}
.garantias li:hover { border-color: var(--accent); transform: translateX(3px); }
.ga-ico {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
}
.ga-ico svg { width: 17px; }
.garantias b { display: block; font-size: 13.5px; font-weight: 650; }
.garantias small { display: block; font-size: 11.5px; color: var(--txt-3); line-height: 1.35; }

/* ---- a loja fisica ---- */
.loja-agora {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  padding: 30px 32px; flex-wrap: wrap;
}
.la-txt { display: grid; gap: 5px; min-width: 0; }
.la-status {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  padding: 5px 13px 5px 10px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12px; font-weight: 650; color: var(--txt-2);
}
.la-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-3); }
.la-status.aberto { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.la-status.aberto i { background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulsaPonto 2.2s var(--ease-io) infinite; }
@keyframes pulsaPonto { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70%, 100% { box-shadow: 0 0 0 7px rgba(0,0,0,0); } }
.la-txt h2 { font-size: clamp(22px, 3.4vw, 30px); margin-top: 2px; }
.la-txt p { color: var(--txt-2); font-size: 14.5px; }
.la-txt small { font-size: 12.5px; color: var(--txt-3); }
.la-acoes { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }

/* =====================================================================
   FILTROS
   ===================================================================== */
.filtros-sticky { position: sticky; top: 10px; z-index: 60; margin-bottom: 26px; }
.filters { display: grid; gap: 14px; padding: 18px; }
.filter-row { display: flex; gap: 12px; align-items: center; }
.range-row { align-items: flex-end; flex-wrap: wrap; }
.field.grow { flex: 1; min-width: 180px; }
.so-mobile { display: none; }
.filtros-mais { display: grid; gap: 14px; }
.filtros-ativos { display: flex; flex-wrap: wrap; gap: 7px; }
.fa-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px 6px 13px; border-radius: 99px; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); font-size: 12.5px; font-weight: 650; }
.fa-chip button { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 11px; line-height: 1; font-weight: 800; }
.fa-limpar { padding: 6px 13px; border-radius: 99px; border: 1px dashed var(--line-forte); font-size: 12.5px; color: var(--txt-2); font-weight: 600; }
.fa-limpar:hover { border-color: var(--accent); color: var(--accent); }

.empty { text-align: center; padding: 70px 20px; }
.empty span { font-size: 46px; display: block; margin-bottom: 14px; opacity: .6; }
.empty h3 { margin-bottom: 6px; }
.empty p { color: var(--txt-2); font-size: 14px; margin-bottom: 18px; }

/* =====================================================================
   RIFAS — O BILHETE
   A rifa e um bilhete de verdade: tem picote no meio, entalhes nas
   bordas e um relogio de aeroporto marcando o sorteio. O canhoto de
   cima apresenta o premio; a parte de baixo e o mapa dos numeros.
   ===================================================================== */
@property --rf-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---- o banner da home continua, so que afinado ---- */
.rifa-banner { position: relative; overflow: hidden; margin-top: 56px; border-radius: var(--r-xl); padding: 34px; background: linear-gradient(118deg, var(--accent-soft), transparent 55%), var(--glass); border: 1px solid var(--glass-brd); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; box-shadow: var(--shadow-sm); }
.rifa-banner::before { content: ""; position: absolute; width: 420px; height: 420px; right: -130px; top: -170px; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow), transparent 68%); filter: blur(34px); animation: rfPulsa 5s var(--ease-io) infinite; }
@keyframes rfPulsa { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.rifa-banner-body { position: relative; display: grid; gap: 13px; justify-items: start; }
.rifa-banner h2 { font-size: clamp(24px, 3.6vw, 36px); }
.rifa-banner p { color: var(--txt-2); max-width: 46ch; }
.rifa-prize { position: relative; display: grid; place-items: center; }
.rifa-prize-img { width: 100%; max-width: 330px; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; background: var(--img-bg); display: grid; place-items: center; box-shadow: var(--shadow); transform: rotate(-2.5deg); transition: transform .6s var(--spring); }
.rifa-prize-img:hover { transform: rotate(0) scale(1.03); }
.rifa-prize-img img { width: 100%; height: 100%; object-fit: cover; }
.rifa-prize-img .ph { font-size: 76px; opacity: .5; }
.rifa-prize-tag { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); padding: 8px 18px; border-radius: 99px; background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink); font-weight: 800; font-size: 13px; box-shadow: 0 12px 26px -10px var(--accent-glow); white-space: nowrap; }

/* ---------------------------------------------------------------------
   O BILHETE
   Os entalhes sao buracos de verdade: duas mascaras radiais que apagam
   um circulo de cada lado na altura do picote. Pintar circulos por cima
   so funcionaria com fundo chapado — aqui atras passa a aurora.
   --------------------------------------------------------------------- */
.rifa-card {
  position: relative; isolation: isolate; margin-bottom: 30px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--accent-soft), transparent 55%),
    var(--glass);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
  --corte: 19px;
  -webkit-mask:
    radial-gradient(var(--corte) at 0 var(--picote, 50%), transparent 98%, #000 100%),
    radial-gradient(var(--corte) at 100% var(--picote, 50%), transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(var(--corte) at 0 var(--picote, 50%), transparent 98%, #000 100%),
    radial-gradient(var(--corte) at 100% var(--picote, 50%), transparent 98%, #000 100%);
  mask-composite: intersect;
}
/* a borda nao pode ser border: ela ignoraria os entalhes. E um anel
   conico recortado, que de quebra gira devagar. */
.rifa-card::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit; box-sizing: border-box; padding: 1px;
  background: conic-gradient(from var(--rf-ang),
    var(--glass-brd) 0 42%, var(--accent) 52%, #a9ffd6 56%, var(--accent) 60%, var(--glass-brd) 70% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: rfGira 9s linear infinite;
}
@keyframes rfGira { to { --rf-ang: 360deg; } }

/* ---- canhoto de cima: o premio ---- */
.rifa-top { position: relative; display: grid; grid-template-columns: 300px 1fr; gap: 26px; padding: 26px; align-items: center; }
.rifa-top .rifa-prize-img {
  max-width: none; transform: none; aspect-ratio: 4/3;
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, .8);
}
/* o holograma: um claro colorido que varre a foto do premio */
.rifa-prize-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .5) 44%,
    rgba(169, 255, 214, .45) 50%, rgba(255, 255, 255, .5) 56%, transparent 68%);
  transform: translateX(-120%);
  animation: rfFoil 7s var(--ease-io) 1.2s infinite;
}
@keyframes rfFoil { 0%, 72% { transform: translateX(-120%); } 94%, 100% { transform: translateX(120%); } }

.rifa-info { position: relative; display: grid; gap: 14px; justify-items: start; }
.rifa-info h2 { font-size: clamp(22px, 3vw, 30px); }
.rifa-info .desc { color: var(--txt-2); font-size: 14.5px; }
.rifa-price-tag {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 17px; border-radius: 99px;
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); font-weight: 700;
}
.rifa-price-tag b { font-size: 19px; }
.rifa-price-tag::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%);
  transform: translateX(-130%); animation: rfVarre 5.5s var(--ease-io) infinite;
}
@keyframes rfVarre { 0%, 76% { transform: translateX(-130%); } 96%, 100% { transform: translateX(130%); } }
.rifa-regra { font-size: 12px; color: var(--txt-3); margin-top: 6px; }

/* ---------------------------------------------------------------------
   QUANTO JA FOI: a barra com a bolha andando junto
   --------------------------------------------------------------------- */
/* a bolha fica acima da barra: sem essa folga ela subia em cima do
   preco do numero */
.progress { position: relative; width: 100%; max-width: 430px; margin-top: 16px; }
.progress-bar { position: relative; height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.progress-fill {
  height: 100%; border-radius: 99px; width: 0; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--g-700), var(--g-400));
  box-shadow: 0 0 16px var(--accent-glow);
  transition: width 1.4s var(--ease);
}
.progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: rfCorre 2.2s linear infinite; }
@keyframes rfCorre { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* a bolha anda com o enchimento: e ela que diz a porcentagem */
.progress-bolha {
  position: absolute; top: -30px; left: 0; transform: translateX(-50%) scale(.6);
  padding: 3px 9px; border-radius: 99px; white-space: nowrap;
  background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 18px -8px var(--accent-glow);
  opacity: 0; transition: left 1.4s var(--ease), opacity .5s var(--ease) .5s, transform .6s var(--spring) .5s;
}
.progress-bolha::after {
  content: ""; position: absolute; bottom: -4px; left: 50%; margin-left: -4px;
  width: 8px; height: 8px; transform: rotate(45deg); background: var(--g-700);
}
.rifa-card.pronta .progress-bolha { opacity: 1; transform: translateX(-50%) scale(1); }
.progress-meta { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12.5px; color: var(--txt-2); }
.progress-meta b { color: var(--accent); }

/* ---------------------------------------------------------------------
   O RELOGIO DE AEROPORTO
   Cada digito e uma ficha partida ao meio. Quando o valor muda, a
   metade de cima cai com o numero velho e a de baixo sobe com o novo —
   duas folhas giradas em eixos opostos, com meio tempo de atraso entre
   elas. E por isso que existem quatro camadas por digito.
   --------------------------------------------------------------------- */
.countdown { display: flex; gap: 9px; }
.cd-box {
  display: grid; justify-items: center; gap: 6px;
}
.cd-digitos { display: flex; gap: 3px; }
.cd-box > span {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--txt-3); font-weight: 650;
}
.fc-d {
  position: relative; width: 27px; height: 38px; perspective: 160px;
  font-family: var(--mono); font-size: 21px; font-weight: 800; line-height: 38px;
  font-variant-numeric: tabular-nums; color: var(--txt);
  border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* o vinco: a linha que divide as duas metades da ficha */
.fc-d::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; z-index: 5;
  background: rgba(0, 0, 0, .45); pointer-events: none;
}
.fc-d i { position: absolute; left: 0; width: 100%; height: 38px; text-align: center; font-style: normal; }
.fc-meia { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; border-radius: 8px 8px 0 0; }
.fc-meia.baixo { top: 50%; border-radius: 0 0 8px 8px; }
.fc-meia.baixo i { top: -19px; }
.fc-meia.cima i { top: 0; }
/* as folhas que giram ficam por cima das metades paradas */
.fc-folha { z-index: 3; background: var(--surface-2); backface-visibility: hidden; }
.fc-folha.cima { transform-origin: 50% 100%; }
.fc-folha.baixo { transform-origin: 50% 0; transform: rotateX(90deg); }
.fc-d.vira .fc-folha.cima { animation: fcCai .42s var(--ease-io) forwards; }
.fc-d.vira .fc-folha.baixo { animation: fcSobe .42s var(--ease-io) .2s forwards; }
@keyframes fcCai { to { transform: rotateX(-90deg); } }
@keyframes fcSobe { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.cd-fim {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px;
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent);
  font-weight: 750; font-size: 13.5px;
}

/* ---------------------------------------------------------------------
   O PICOTE: a linha tracejada entre o canhoto e os numeros
   --------------------------------------------------------------------- */
.rifa-picote {
  position: relative; height: 0; margin: 0 var(--corte);
  border-top: 2px dashed var(--line-forte); opacity: .8;
}

/* ---------------------------------------------------------------------
   O MAPA DOS NUMEROS
   --------------------------------------------------------------------- */
.rifa-nums { position: relative; padding: 22px 26px 26px; }
.nums-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.nums-head h3 { font-family: var(--font-titulo); letter-spacing: -.02em; }
.nums-legend { display: flex; gap: 13px; font-size: 11.5px; color: var(--txt-2); flex-wrap: wrap; }
.nums-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lg-free { background: var(--surface-2); border: 1px solid var(--line); }
.lg-sel { background: var(--accent); }
.lg-res { background: #e59b16; }
.lg-sold { background: #44484a; }

.nums-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 7px;
  /* so rola na vertical: com overflow-y sozinho o navegador liberava a
     horizontal tambem e aparecia uma barra embaixo da grade */
  max-height: 330px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  /* a folga lateral e maior: o anel da escolha sai 3px para fora da
     ficha e nas colunas da ponta ele era cortado */
  padding: 9px 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
}
.nums-grid::-webkit-scrollbar { width: 8px; }
.nums-grid::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }
/* a luz do ponteiro corre por cima da grade inteira */
.nums-grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130px 130px at var(--mx, -999px) var(--my, -999px), var(--accent-soft), transparent 70%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.nums-grid.acesa::before { opacity: 1; }

.num {
  position: relative; z-index: 1; aspect-ratio: 1.45/1; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--txt-2);
  font-variant-numeric: tabular-nums; font-family: var(--mono);
  transition: transform .35s var(--spring), background .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
}
/* a grade entra em onda: cada ficha espera um pouco mais que a anterior */
.rifa-card.entrando .num { animation: numEntra .5s var(--ease) both; animation-delay: calc(var(--n, 0) * 9ms); }
@keyframes numEntra { from { opacity: 0; transform: translateY(10px) scale(.86); } to { opacity: 1; transform: none; } }

.num:hover:not(:disabled) { transform: translateY(-3px) scale(1.07); border-color: var(--accent); color: var(--accent); }
.num:active:not(:disabled) { transform: scale(.92); }
.num.sel {
  background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink);
  border-color: transparent; box-shadow: 0 8px 20px -8px var(--accent-glow);
}
/* o anel que sai da ficha no instante da escolha */
.num.bateu::after {
  content: ""; position: absolute; inset: -3px; border-radius: 12px;
  border: 2px solid var(--accent); animation: numOnda .62s var(--ease) forwards;
}
@keyframes numOnda { from { transform: scale(.7); opacity: .95; } to { transform: scale(1.55); opacity: 0; } }

.num.sold, .num.reservado { cursor: not-allowed; }
.num.sold {
  background: repeating-linear-gradient(45deg, rgba(120,120,120,.22), rgba(120,120,120,.22) 4px, transparent 4px, transparent 8px);
  color: var(--txt-3); text-decoration: line-through; opacity: .6;
}
.num.reservado { background: rgba(240,169,43,.16); border-color: rgba(240,169,43,.5); color: #e59b16; }
/* o pontinho avisa que o numero esta preso, mas ainda nao pago */
.num.reservado::before {
  content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%;
  background: #e59b16; animation: rfPisca 1.8s var(--ease-io) infinite;
}
@keyframes rfPisca { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.num.pago { background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink); border-color: transparent; }

/* a ficha que voa da grade ate o total, para a escolha ter destino */
.num-voando {
  position: fixed; z-index: 900; pointer-events: none; display: grid; place-items: center;
  border-radius: 10px; background: linear-gradient(145deg, var(--g-500), var(--g-700));
  color: var(--accent-ink); font-family: var(--mono); font-size: 12.5px; font-weight: 800;
  box-shadow: 0 14px 28px -10px var(--accent-glow);
}

/* ---------------------------------------------------------------------
   O PE: o que foi escolhido e quanto da
   --------------------------------------------------------------------- */
.nums-foot {
  margin-top: 16px; display: grid; gap: 12px;
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .5s var(--ease), box-shadow .6s var(--ease);
}
.nums-foot.tem { border-color: var(--accent); box-shadow: 0 22px 44px -34px var(--accent-glow); }
.nums-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.nums-total { min-width: 0; display: grid; gap: 3px; }
.nums-total > span { font-size: 11.5px; color: var(--txt-3); }
.nums-total b {
  font-family: var(--font-titulo); font-size: 26px; font-weight: 800; letter-spacing: -.035em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.nums-fichas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.nums-fichas:empty { display: none; }
.nums-fichas span {
  padding: 3px 9px; border-radius: 99px; background: var(--accent-soft); border: 1px solid var(--accent);
  color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 750;
  animation: fichaPoe .45s var(--spring) both;
}
@keyframes fichaPoe { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.nums-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.nums-acoes .btn-primary { flex: 1 1 auto; }

/* o botao da sorte vira um rolo girando antes de parar no numero */
.btn-sorte { position: relative; overflow: hidden; min-width: 158px; }
.btn-sorte.rolando { pointer-events: none; }
.btn-sorte .sorte-rolo { font-family: var(--mono); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   RIFAS ENCERRADAS: cada uma vira um canhoto
   --------------------------------------------------------------------- */
.rifa-hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.hist-card {
  position: relative; overflow: hidden;
  padding: 20px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  display: grid; gap: 7px;
  transition: transform .5s var(--spring), border-color .4s var(--ease);
}
.hist-card:hover { transform: translateY(-4px); border-color: var(--line-forte); }
/* o recorte do canhoto, do mesmo jeito do bilhete grande */
.hist-card {
  --corte: 13px;
  -webkit-mask:
    radial-gradient(var(--corte) at 0 70%, transparent 98%, #000 100%),
    radial-gradient(var(--corte) at 100% 70%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(var(--corte) at 0 70%, transparent 98%, #000 100%),
    radial-gradient(var(--corte) at 100% 70%, transparent 98%, #000 100%);
  mask-composite: intersect;
}
.hist-card .win {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: var(--r-sm);
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent);
  font-weight: 700; font-size: 13.5px; margin-top: 8px;
}
.hist-card .win svg { width: 16px; flex-shrink: 0; }
/* o troféu brilha de vez em quando, como medalha pegando luz */
.hist-card .win::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(104deg, transparent 42%, rgba(255, 255, 255, .4) 50%, transparent 58%);
  transform: translateX(-130%); animation: rfVarre 6s var(--ease-io) infinite;
}

/* barrinha de progresso na linha da rifa no painel */
.rifa-barra { display: block; height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 7px; max-width: 240px; }
.rifa-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--g-700), var(--g-400)); transition: width .6s var(--ease); }
.icon-btn.sortear { color: var(--accent); background: var(--accent-soft); }

/* =====================================================================
   PAINEL — CARTOES DE RIFA
   Cada rifa e um painel vivo: anel de progresso, mapa dos numeros,
   caixa contando e contagem regressiva correndo.
   ===================================================================== */
.rcards { display: grid; gap: 13px; }

.rcard {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 14px; padding: 18px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  opacity: 0; transform: translateY(18px);
  animation: rcEntra .62s var(--spring) forwards;
  animation-delay: calc(var(--i, 0) * .08s);
  transition: border-color .4s var(--ease), box-shadow .45s var(--ease), transform .5s var(--spring);
}
@keyframes rcEntra { to { opacity: 1; transform: none; } }
.rcard:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 26px 52px -30px var(--accent-glow); }

/* a aura respira por baixo do cartao da rifa aberta */
.rc-aura {
  position: absolute; inset: -30% 45% 40% -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 30% 35%, var(--accent-soft), transparent 70%);
  animation: rcAura 9s var(--ease-io) infinite;
}
@keyframes rcAura {
  0%, 100% { transform: none; opacity: .8; }
  50% { transform: translate(18px, 12px) scale(1.15); opacity: 1; }
}
.rcard.fechada .rc-aura { background: radial-gradient(60% 60% at 30% 35%, rgba(255,255,255,.05), transparent 70%); animation: none; }

/* o brilho varre o cartao uma vez, na entrada */
.rc-brilho {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: rcVarre 1.3s var(--ease-io) forwards;
  animation-delay: calc(.35s + var(--i, 0) * .08s);
}
html[data-theme="light"] .rc-brilho { background: linear-gradient(105deg, transparent 40%, rgba(0,0,0,.045) 50%, transparent 60%); }
@keyframes rcVarre { to { transform: translateX(120%); } }

/* ---- topo: premio, titulo e anel ---- */
.rc-topo { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.rc-premio {
  width: 64px; height: 64px; border-radius: 19px; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: transform .55s var(--spring), box-shadow .45s;
}
.rc-premio img { width: 100%; height: 100%; object-fit: cover; }
.rc-emoji { font-size: 30px; line-height: 1; }
.rcard:hover .rc-premio { transform: scale(1.06) rotate(-5deg); box-shadow: 0 14px 30px -14px var(--accent-glow); }

.rc-tit { min-width: 0; display: grid; gap: 3px; }
.rc-selo {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 750;
  background: var(--surface-2); color: var(--txt-3);
}
.rc-selo.viva { background: var(--accent-soft); color: var(--accent); }
.rc-selo.viva i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulsar 2.2s var(--ease-io) infinite; }
.rc-tit h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-tit p { font-size: 12.5px; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- anel de progresso ---- */
.rc-anel { position: relative; width: 66px; height: 66px; display: grid; place-items: center; flex-shrink: 0; }
.rc-anel svg { width: 66px; height: 66px; transform: rotate(-90deg); }
.ra-trilho { fill: none; stroke: var(--surface-2); stroke-width: 7; }
.ra-arco {
  fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset 1.3s var(--ease) .25s;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
/* cinza sobre o trilho cinza sumia: encerrada fica verde apagado */
.rcard.fechada .ra-arco { stroke: var(--accent); opacity: .45; filter: none; }
.ra-pc { position: absolute; display: flex; align-items: baseline; gap: 1px; font-variant-numeric: tabular-nums; }
.ra-pc b { font-size: 17px; font-weight: 800; letter-spacing: -.04em; }
.ra-pc i { font-style: normal; font-size: 10px; color: var(--txt-3); }

/* ---- mapa dos numeros ---- */
.rc-mapa {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9px, 1fr)); gap: 3px;
  padding: 11px; border-radius: var(--r-md); background: var(--adm-bg, var(--bg)); border: 1px solid var(--line);
}
.rc-mapa i {
  aspect-ratio: 1; border-radius: 2px; background: var(--surface-2);
  opacity: 0; animation: mapaEntra .4s var(--ease) forwards;
  animation-delay: calc(.3s + var(--c, 0) * 6ms);
}
@keyframes mapaEntra { to { opacity: 1; } }
.rc-mapa i.pg { background: var(--accent); box-shadow: 0 0 5px -1px var(--accent-glow); }
.rc-mapa i.rs { background: #e59b16; }

/* ---- numeros em linha ---- */
.rc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.rc-st { display: grid; gap: 1px; padding: 10px 11px; border-radius: var(--r-sm); background: var(--surface-2); }
.rc-st b { font-size: 17px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.rc-st small { font-size: 10.5px; color: var(--txt-3); }
.rc-st.pg b { color: var(--accent); }
.rc-st.rs b { color: #e59b16; }
html[data-theme="dark"] .rc-st.rs b { color: #ffc14d; }
.rc-st.caixa { background: var(--accent-soft); }
.rc-st.caixa b { color: var(--accent); font-size: 15px; }

/* ---- contagem regressiva ---- */
.rc-conta { display: grid; gap: 8px; }
.rc-conta-rot { font-size: 11.5px; color: var(--txt-3); font-weight: 600; }
.countdown.mini { gap: 6px; }
.countdown.mini .fc-d { width: 21px; height: 30px; font-size: 16px; line-height: 30px; }
.countdown.mini .fc-d i { height: 30px; }
.countdown.mini .fc-meia.baixo i { top: -15px; }
.countdown.mini .cd-box > span { font-size: 8.5px; }

/* ---- ganhador ---- */
.rc-ganhador {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent);
}
.rg-trofeu { font-size: 26px; line-height: 1; animation: trofeu 3.4s var(--ease-io) infinite; }
@keyframes trofeu { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-12deg) scale(1.12); } 96% { transform: rotate(10deg) scale(1.12); } }
.rc-ganhador small { display: block; font-size: 10.5px; color: var(--txt-3); }
.rc-ganhador b { display: block; font-size: 15px; font-weight: 750; color: var(--accent); }

/* ---- acoes ---- */
.rc-acoes { display: flex; gap: 7px; flex-wrap: wrap; }
.rc-acoes .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; }
.rc-acoes .btn svg { width: 15px; }
.rc-sortear { position: relative; overflow: visible; }
.rs-pulso {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--accent); animation: rsPulso 2.4s var(--ease-io) infinite;
}
@keyframes rsPulso { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.22); opacity: 0; } }

/* resultado do sorteio */
.sorteio-res { display: grid; justify-items: center; gap: 4px; text-align: center; }
.sr-rot { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-3); }
.sr-num { font-size: clamp(56px, 16vw, 86px); font-weight: 800; letter-spacing: -.05em; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
/* enquanto o tambor roda o numero treme e fica meio apagado */
.sorteando .sr-num { color: var(--txt-2); animation: srTambor .28s steps(2) infinite; }
@keyframes srTambor { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.sorteando .sr-nome, .sorteando .sr-prova, .sorteando .btn { opacity: 0; transform: translateY(10px); }
.sr-nome, .sr-prova, .sorteio-res .btn { transition: opacity .5s var(--ease) .1s, transform .5s var(--spring) .1s; }
.revelado .sr-num { animation: srEntra .75s var(--spring); }
.revelado .sr-num::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px;
  border-radius: 50%; border: 2px solid var(--accent); pointer-events: none;
  animation: srOnda .9s var(--ease) forwards;
}
@keyframes srOnda { to { width: 230px; height: 230px; margin: -115px; opacity: 0; } }
.sorteio-res { position: relative; }
@keyframes srEntra { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
.sr-nome { font-size: 17px; font-weight: 650; margin-top: 2px; }
.sr-nome.sem { font-size: 13px; font-weight: 500; color: var(--txt-3); max-width: 34ch; }
.sr-prova { display: grid; gap: 3px; margin: 16px 0 6px; padding: 13px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--txt-3); width: 100%; }
.sr-prova b { color: var(--txt-2); font-weight: 650; }
.sr-semente { font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; }
.sorteio-res .btn { margin-top: 10px; width: 100%; }

/* participantes da rifa */
.participantes { display: grid; gap: 2px; list-style: none; }
.participantes li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 10px; border-radius: var(--r-sm); opacity: 0; animation: dashEntraX .5s var(--ease) both; animation-delay: calc(.1s + var(--i, 0) * .05s); }
.participantes li:hover { background: var(--surface-2); }
.pt-ini { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 15px; }
.pt-corpo { min-width: 0; display: grid; gap: 1px; }
.pt-corpo b { font-size: 13.5px; font-weight: 620; }
.pt-corpo small { font-size: 11px; color: var(--txt-3); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-dir { display: grid; justify-items: end; gap: 4px; }
.pt-dir b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.howto { display: grid; gap: 12px; }
.howto ol { display: grid; gap: 11px; counter-reset: s; }
.howto li { position: relative; padding-left: 40px; color: var(--txt-2); font-size: 14.5px; counter-increment: s; }
.howto li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px; border: 1px solid var(--accent); }
.howto li b { color: var(--txt); }

/* =====================================================================
   CONFIANCA / PASSOS / SERVICOS
   ===================================================================== */
/* confianca e passos moram agora no bloco "comprar aqui" da home */

.serv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.serv { position: relative; overflow: hidden; padding: 24px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-brd); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: grid; gap: 8px; align-content: start; transition: transform .45s var(--spring), border-color .35s, box-shadow .4s; }
.serv:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 26px 50px -26px var(--accent-glow); }
.serv .si {
  width: 48px; height: 48px; border-radius: 16px; margin-bottom: 10px;
  display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(150deg, var(--surface-2), transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .5s var(--spring), background .4s var(--ease), color .3s;
}
.serv .si svg { width: 24px; stroke-width: 1.8; }
.serv:hover .si {
  transform: scale(1.06) rotate(-6deg); color: var(--accent-ink);
  background: linear-gradient(150deg, var(--g-500), var(--g-700));
}
.serv h3 { font-family: var(--font-titulo); letter-spacing: -.015em; }
.serv p { color: var(--txt-2); font-size: 13.8px; }
.serv-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.serv .price { font-weight: 750; color: var(--accent); font-size: 15px; }
.serv .prazo { padding: 3px 9px; border-radius: 7px; background: var(--surface-2); font-size: 11.5px; color: var(--txt-2); font-weight: 600; }
.serv .btn { margin-top: 12px; }

/* =====================================================================
   SIMULADOR E AVALIACAO
   ===================================================================== */
.avaliacao { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; align-items: center; }
.aval-intro p { color: var(--txt-2); margin-top: 10px; font-size: 14.5px; }
.aval-nota { margin-top: 14px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px dashed var(--line-forte); font-size: 12.5px; color: var(--txt-2); }
.aval-form { display: grid; gap: 14px; }
.aval-out { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent); }
.aval-out span { font-size: 13px; color: var(--txt-2); }
.aval-out strong { font-size: 26px; font-weight: 800; color: var(--accent); letter-spacing: -.03em; }


/* =====================================================================
   DEPOIMENTOS
   ===================================================================== */

/* =====================================================================
   SOBRE
   ===================================================================== */
.sobre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.info-card h3 { margin-top: 20px; margin-bottom: 5px; }
.info-card h3:first-of-type { margin-top: 0; }
.info-card p { color: var(--txt-2); font-size: 14.5px; }
.info-card a { color: var(--accent); font-weight: 600; }
.info-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 650; margin-bottom: 20px; }
.info-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--txt-3); }
.info-status.aberto { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.info-status.aberto i { background: var(--accent); animation: pulsar 2.2s var(--ease-io) infinite; }
.horarios { display: grid; gap: 2px; margin-top: 4px; }
.hr-linha { display: flex; justify-content: space-between; gap: 14px; padding: 7px 11px; border-radius: 9px; font-size: 13.5px; color: var(--txt-2); }
.hr-linha.hoje { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.hr-linha b { font-variant-numeric: tabular-nums; }
.info-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.faq-card h3 { margin-bottom: 14px; }
.faq details { border-bottom: 1px solid var(--line); padding: 13px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 19px; font-weight: 700; transition: transform .35s var(--spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--txt-2); font-size: 14px; margin-top: 9px; animation: spSobeTexto .4s var(--ease) forwards; }

/* =====================================================================
   RODAPE ENXUTO
   ===================================================================== */
.footer { position: relative; z-index: 2; margin-top: 70px; border-top: 1px solid var(--line); background: var(--surface); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding-bottom: 20px; }
.footer-bar { max-width: var(--maxw); margin: 0 auto; padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--txt-3); }
.footer-bar .brand-text { font-size: 15px; color: var(--txt-2); }

/* =====================================================================
   TAB BAR
   ===================================================================== */
/* sem barra no topo, esta e a unica navegacao do site: vale em qualquer tela */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; display: flex; padding: 0 12px calc(10px + env(safe-area-inset-bottom)); justify-content: center; }
.tabbar-inner { max-width: 420px; }
#app { padding-bottom: 110px; }
.footer { padding-bottom: 96px; }
.tabbar-inner {
  position: relative; width: 100%; max-width: 480px; border-radius: 34px;
  display: flex; align-items: flex-end; padding: 7px 6px;
  --furo-y: 4px; --furo-r: 35px;
  /* o vidro sai do elemento e passa a ser pintado no ::before. E ele que
     leva o furo; se a mascara ficasse na barra, o circulo do menu, que e
     filho dela, seria recortado junto. */
  background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.tabbar-inner::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hl), inset 0 -1px 0 rgba(0,0,0,.14);
  -webkit-mask-image: radial-gradient(circle var(--furo-r) at 50% var(--furo-y), transparent 96%, #000 100%);
  mask-image: radial-gradient(circle var(--furo-r) at 50% var(--furo-y), transparent 96%, #000 100%);
}
/* o brilho do vidro acompanha o mesmo recorte */
.tabbar-inner::after {
  -webkit-mask-image: radial-gradient(circle var(--furo-r) at 50% var(--furo-y), transparent 96%, #000 100%);
  mask-image: radial-gradient(circle var(--furo-r) at 50% var(--furo-y), transparent 96%, #000 100%);
}
/* so icone: sem nome embaixo, o alvo fica maior e a barra mais limpa */
.tabbar-inner > a { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; padding: 13px 2px; color: var(--txt-3); transition: color .35s var(--ease), transform .35s var(--spring); }
.tabbar-inner svg { width: 23px; }

/* Na vitrine, aquele lugar da barra vira o carrinho: os dois desenhos moram
   na mesma celula e trocam girando, sem a barra mexer de lugar. */
.tab-morph { position: relative; display: grid; place-items: center; width: 23px; height: 23px; }
.tab-morph svg {
  grid-area: 1 / 1; width: 23px;
  transition: transform .5s var(--spring), opacity .3s var(--ease);
}
.tab-morph .ic-cart { transform: rotate(-90deg) scale(.4); opacity: 0; }
#tabVitrine.vira-carrinho .ic-vitrine { transform: rotate(90deg) scale(.4); opacity: 0; }
#tabVitrine.vira-carrinho .ic-cart { transform: none; opacity: 1; }
#tabVitrine .badge {
  position: absolute; top: 6px; right: 50%; margin-right: -20px;
  transform: scale(0); transition: transform .45s var(--spring);
}
#tabVitrine.vira-carrinho .badge:not([hidden]) { transform: scale(1); }
#tabVitrine.vira-carrinho { color: var(--accent); }
.tabbar-inner span { font-size: 10px; font-weight: 600; }
.tabbar-inner > a.on { color: var(--accent); }
.tabbar-inner > a.on svg { animation: pulaTab .5s var(--spring); }
@keyframes pulaTab { 0% { transform: scale(1); } 45% { transform: scale(1.3) translateY(-3px); } 100% { transform: scale(1); } }
.tabbar-inner > a:active { transform: scale(.9); }
.tab-indicator { position: absolute; z-index: 1; top: 0; left: 0; height: 0; width: 0; border-radius: 24px; background: var(--accent-soft); border: 1px solid var(--accent-glow); transition: transform .5s var(--spring), width .5s var(--spring), height .4s var(--ease), opacity .3s; opacity: 0; }
.tab-indicator.show { opacity: 1; }

/* botao do menu: circulo destacado no centro da barra */
/* o rotulo somava 8px ao centro; devolvemos metade: a barra fica 4px mais
   baixa do que era com a palavra */
.tab-centro { position: relative; z-index: 3; flex: 1; display: grid; justify-items: center; padding: 4px 2px 0; }
.tc-circ {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--g-400), var(--g-700));
  color: var(--accent-ink);
  box-shadow: 0 10px 26px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);
  transform: translateY(-20px);
  transition: transform .55s var(--spring), box-shadow .4s var(--ease);
}
.tab-centro:active .tc-circ { transform: translateY(-20px) scale(.9); }
.tc-burger { display: grid; gap: 4px; }
.tc-burger i { display: block; width: 17px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--spring), opacity .25s; }
/* com o menu aberto a barra sobe acima do fundo escurecido:
   e ela que esta se expandindo, entao precisa continuar visivel */
.tabbar.aberto { z-index: 960; }
.tabbar.aberto .tc-circ { transform: translateY(-20px) rotate(90deg); box-shadow: 0 14px 32px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.4); }
.tabbar.aberto .tc-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tabbar.aberto .tc-burger i:nth-child(2) { opacity: 0; }
.tabbar.aberto .tc-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =====================================================================
   SHEETS, MODAIS E GAVETAS
   ===================================================================== */
.sheet { position: fixed; inset: 0; z-index: 900; display: none; }
.sheet.open { display: block; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.58); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); opacity: 0; animation: aparece .4s var(--ease) forwards; }
html[data-theme="light"] .sheet-backdrop { background: rgba(16,38,28,.32); }
@keyframes aparece { to { opacity: 1; } }
.sheet.closing .sheet-backdrop { animation: some .3s var(--ease) forwards; }
@keyframes some { to { opacity: 0; } }

/* ---------- MENU ---------- */
.sheet.menu { z-index: 940; }
.menu-panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(400px, 90vw);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass-forte);
  -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%);
  border-right: 1px solid var(--glass-brd);
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  box-shadow: var(--shadow-lg);
  animation: menuEntra .62s var(--spring) both;
}
@keyframes menuEntra { from { transform: translateX(-102%) scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet.closing .menu-panel { animation: menuSai .34s var(--ease) forwards; }
@keyframes menuSai { to { transform: translateX(-102%); opacity: .3; } }

.menu-aura { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(70px); pointer-events: none;
  background: radial-gradient(circle, var(--accent-glow), transparent 68%); top: -120px; left: -90px; animation: auraMenu 9s var(--ease-io) infinite; }
.menu-aura.b { top: auto; bottom: -140px; left: auto; right: -110px; width: 280px; height: 280px; opacity: .6; animation-delay: 2s; animation-duration: 11s; }
@keyframes auraMenu { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,40px) scale(1.2); } }

.menu-grab { display: none; }

.menu-topo { flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 20px 16px; border-bottom: 1px solid var(--line); }
.menu-marca { display: flex; align-items: center; gap: 12px; }
.menu-marca .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
.menu-marca .brand-mark svg { width: 23px; }
.menu-marca .brand-text { font-size: 17px; display: block; }
.menu-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--txt-3); margin-top: 2px; }
.menu-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--txt-3); }
.menu-status.aberto { color: var(--accent); }
.menu-status.aberto::before { background: var(--accent); animation: pulsar 2.2s var(--ease-io) infinite; }
.menu-fechar { transition: transform .45s var(--spring); }
.menu-fechar:hover { transform: rotate(90deg); }

.menu-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(26px + env(safe-area-inset-bottom)); }
.menu-scroll::-webkit-scrollbar { width: 6px; }
.menu-scroll::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }
.menu-scroll > * { opacity: 0; transform: translateX(-16px); animation: menuItem .5s var(--ease) forwards; animation-delay: calc(.14s + var(--i, 0) * .035s); }
.sheet.closing .menu-scroll > * { animation: none; opacity: 1; transform: none; }
@keyframes menuItem { to { opacity: 1; transform: none; } }
@keyframes menuItemY { to { opacity: 1; transform: none; } }
@keyframes menuExpande {
  from { clip-path: inset(100% 0 0 0 round 26px); opacity: .25; transform: translateY(16px); }
  to   { clip-path: inset(0 0 0 0 round 26px); opacity: 1; transform: none; }
}
@keyframes menuRecolhe { to { clip-path: inset(100% 0 0 0 round 26px); opacity: 0; transform: translateY(12px); } }

/* ---- atalhos de contato: quatro quadrados de cor, so o icone no meio ----
   O nome e o dado (telefone, @, chave, endereco) continuam no botao, mas so
   para quem le com leitor de tela e para o balao que aparece no mouse. */
.menu-acoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ma {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1;
  display: grid; place-items: center; padding: 0;
  border: 0; background: none; border-radius: var(--r-md);
  transition: transform .4s var(--spring), box-shadow .4s var(--ease);
}
/* o texto some da tela, nao do botao */
.ma b, .ma small {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}
.ma-ico {
  position: relative; width: 100%; height: 100%; margin: 0;
  border-radius: inherit; display: grid; place-items: center; color: #fff;
}
.ma-ico svg { width: 42%; max-width: 32px; stroke-width: 1.9; }
/* o claro que acende por cima da cor, sem precisar repetir cada gradiente */
.ma-ico::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: #fff; opacity: 0; transition: opacity .3s var(--ease);
}
.ma:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .6); }
.ma:hover .ma-ico::after { opacity: .14; }
.ma:active { transform: scale(.94); transition-duration: .12s; }
.ma:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ma-ico.wpp { background: linear-gradient(145deg, #25d366, #0f9d58); }
.ma-ico.insta { background: linear-gradient(145deg, #f58529, #dd2a7b 55%, #8134af); }
.ma-ico.pix { background: linear-gradient(145deg, #32bcad, #0f8a7e); }
.ma-ico.mapa { background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink); }

/* .aberto aqui ja significa "loja aberta": o do horario precisa de outro nome */
.menu-status { text-align: left; }
.menu-status::after {
  content: ""; width: 13px; height: 13px; flex-shrink: 0;
  background: currentColor; opacity: .6;
  -webkit-mask: no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  mask: no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform .45s var(--spring);
}
.menu-status.expandido::after { transform: rotate(180deg); }

.menu-horario {
  margin: 0 16px 4px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  animation: menuHrAbre .4s var(--ease);
}
@keyframes menuHrAbre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mh-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.5px; color: var(--txt-2); }
.mh-linha + .mh-linha { border-top: 1px solid var(--line); }
.mh-linha b { font-weight: 650; color: var(--txt); font-variant-numeric: tabular-nums; }
.mh-linha.hoje { color: var(--accent); }
.mh-linha.hoje b { color: var(--accent); }

.faq-resposta { color: var(--txt-2); font-size: 14.5px; line-height: 1.65; }

/* ---------------------------------------------------------------------
   MENU ADAPTATIVO
   O painel nao muda de tamanho: a tela de dentro ocupa exatamente o mesmo
   espaco da rolagem principal e entra deslizando por cima dela.
   --------------------------------------------------------------------- */
/* a rolagem principal continua ditando a altura do painel; a segunda tela
   so se deita por cima dela, por isso o tamanho nunca muda */
.menu-corpo { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.menu-scroll, .menu-tela {
  transition: transform .45s var(--ease), opacity .3s var(--ease), visibility .45s;
}
#tabbar .tabbar-inner > .tab-tema {
  position: relative; z-index: 2; flex: 1; display: grid; place-items: center;
  padding: 13px 2px; color: var(--txt-3);
  transition: color .35s var(--ease), transform .35s var(--spring);
}
#tabbar .tabbar-inner > .tab-tema:hover { color: var(--txt-2); }
#tabbar .tabbar-inner > .tab-tema:active { transform: scale(.9); }
.menu-tela {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: var(--glass-forte); overflow: hidden;
  transform: translateX(100%); opacity: 0; visibility: hidden;
}
.menu-panel.em-tela .menu-scroll {
  transform: translateX(-24%); opacity: 0; visibility: hidden; pointer-events: none;
}
.menu-panel.em-tela .menu-tela { transform: none; opacity: 1; visibility: visible; }

.mt-topo {
  display: flex; align-items: center; gap: 11px; flex-shrink: 0;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.mt-voltar { flex-shrink: 0; }
.mt-voltar svg { width: 19px; }
.mt-titulo {
  font-family: var(--font-titulo); font-size: 15.5px; font-weight: 700; letter-spacing: -.015em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px calc(26px + env(safe-area-inset-bottom));
}
.mt-corpo::-webkit-scrollbar { width: 6px; }
.mt-corpo::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }

/* ---- a ficha de um servico ---- */
.mt-serv { display: grid; justify-items: start; gap: 11px; }
.mt-serv > * { opacity: 0; animation: menuItem .5s var(--ease) forwards; }
.mt-serv > *:nth-child(1) { animation-delay: .04s; }
.mt-serv > *:nth-child(2) { animation-delay: .09s; }
.mt-serv > *:nth-child(3) { animation-delay: .14s; }
.mt-serv > *:nth-child(4) { animation-delay: .19s; }
.mt-serv > *:nth-child(5) { animation-delay: .24s; }
.mt-serv > *:nth-child(6) { animation-delay: .29s; }
.mt-serv > *:nth-child(7) { animation-delay: .34s; }
.mt-serv > *:nth-child(8) { animation-delay: .39s; }

.mt-ico {
  width: 58px; height: 58px; border-radius: 19px; display: grid; place-items: center;
  color: var(--accent-ink); background: linear-gradient(150deg, var(--g-500), var(--g-700));
  box-shadow: 0 14px 28px -14px var(--accent-glow);
}
.mt-ico svg { width: 28px; stroke-width: 1.8; }
.mt-serv h3 { font-family: var(--font-titulo); font-size: 19px; letter-spacing: -.02em; }
.mt-serv p { color: var(--txt-2); font-size: 13.8px; line-height: 1.6; }
.mt-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mt-preco { font-size: 15px; font-weight: 780; color: var(--accent); }
.mt-prazo {
  padding: 4px 10px; border-radius: 8px; background: var(--surface-2);
  font-size: 11.5px; font-weight: 650; color: var(--txt-2);
}
.mt-serv .btn { width: 100%; }
.mt-serv .btn svg { width: 17px; }
.mt-nota { font-size: 11.5px; color: var(--txt-3); line-height: 1.5; }
.mt-sub {
  margin-top: 6px; font-family: var(--font-titulo);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--txt-3); font-weight: 700;
}
.mt-outros { display: flex; flex-wrap: wrap; gap: 7px; }
.mt-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px 8px 10px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--txt-2);
  transition: color .3s, border-color .3s, transform .4s var(--spring);
}
.mt-chip svg { width: 15px; color: var(--accent); }
.mt-chip:hover { color: var(--txt); border-color: var(--accent); }
.mt-chip:active { transform: scale(.95); }

/* =====================================================================
   FORMULARIOS DOS SERVICOS NO MENU
   Um so vocabulario para o orcamento de cada servico e para a avaliacao
   de troca: capa viva, trilha de progresso, campos em ficha de vidro,
   escolhas com um marcador que escorrega e botao que acende sozinho.
   ===================================================================== */

/* O angulo precisa ser registrado para poder ser animado. Sem isto o
   navegador trata a conica como texto cru e o aro fica parado. */
@property --fx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.fx { display: grid; gap: 20px; perspective: 1000px; }
/* cada linha entra deitada e se levanta: o desfoque tira o ar de "pulou" */
.fx > * {
  transform-origin: 50% 100%;
  animation: fxEntra .75s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * .065s);
}
@keyframes fxEntra {
  from { opacity: 0; transform: translateY(24px) rotateX(-14deg) scale(.96); filter: blur(8px); }
  55%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.fx-intro { font-size: 13px; color: var(--txt-2); line-height: 1.6; }

/* ---------------------------------------------------------------------
   A CAPA DO SERVICO
   --------------------------------------------------------------------- */
.sv-form { gap: 18px; }
.sv-capa {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center;
  padding: 17px; border-radius: var(--r-lg);
  background:
    radial-gradient(130% 150% at 0% 0%, var(--accent-soft), transparent 58%),
    var(--surface);
  border: 1px solid var(--line);
}
/* o aro: uma conica girando, recortada para sobrar so a moldura de 1px */
.sv-aro {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-sizing: border-box; padding: 1px; opacity: .95;
  background: conic-gradient(from var(--fx-ang),
    transparent 0 58%, var(--g-700) 72%, var(--g-500) 80%, #a9ffd6 86%, var(--g-500) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: fxGira 7s linear infinite;
}
@keyframes fxGira { to { --fx-ang: 360deg; } }
/* a luz segue o dedo pela capa e respira sozinha quando ninguem toca */
.sv-luz {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(170px 170px at var(--mx, 24%) var(--my, 0%),
    rgba(255, 255, 255, .085), transparent 66%);
  opacity: .55; transition: opacity .5s var(--ease);
  animation: fxRespira 9s var(--ease-io) infinite;
}
.sv-capa:hover .sv-luz { opacity: 1; animation: none; }
@keyframes fxRespira { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

.sv-ico {
  position: relative; overflow: hidden; z-index: 1;
  width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center;
  color: var(--accent-ink); background: linear-gradient(150deg, var(--g-500), var(--g-700));
  box-shadow: 0 14px 26px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.sv-ico svg { width: 25px; stroke-width: 1.8; }
/* um claro atravessa o azulejo de vez em quando, como vidro no sol */
.sv-ico::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(108deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: fxBrilho 5.2s var(--ease-io) infinite;
}
@keyframes fxBrilho { 0%, 64% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }

.sv-id { position: relative; z-index: 1; min-width: 0; display: grid; gap: 3px; }
.sv-id b { font-family: var(--font-titulo); font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.sv-id small { font-size: 11.5px; color: var(--txt-3); line-height: 1.45; }
.sv-selos { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.sv-preco {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 800; color: var(--accent); letter-spacing: -.01em;
}
.sv-preco::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow); animation: fxFaisca 2.4s var(--ease-io) infinite;
}
@keyframes fxFaisca {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 5px transparent; }
}
.sv-prazo {
  padding: 4px 10px; border-radius: 8px; background: var(--surface-2);
  font-size: 11px; font-weight: 650; color: var(--txt-2);
}

/* ---------------------------------------------------------------------
   A TRILHA: quanto ja foi respondido
   --------------------------------------------------------------------- */
.sv-trilha { display: grid; gap: 11px; }
.sv-nos { position: relative; display: flex; justify-content: space-between; align-items: center; }
.sv-fio {
  position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; margin-top: -1px;
  border-radius: 99px; background: var(--surface-2); overflow: hidden;
}
.sv-fio i {
  display: block; width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--g-700), var(--g-500));
  box-shadow: 0 0 12px -1px var(--accent-glow);
  transition: width .75s var(--ease);
}
.sv-no {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-3);
  transition: background .5s var(--ease), border-color .5s var(--ease),
              color .3s var(--ease), transform .55s var(--spring);
}
.sv-no i { grid-area: 1 / 1; font-style: normal; font-size: 11px; font-weight: 750; transition: opacity .25s, transform .45s var(--spring); }
.sv-no svg { grid-area: 1 / 1; width: 14px; stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 24; opacity: 0; }
.sv-no:hover { border-color: var(--line-forte); transform: scale(1.08); }
.sv-no.ok {
  background: linear-gradient(150deg, var(--g-500), var(--g-700)); border-color: transparent;
  color: var(--accent-ink); transform: scale(1.16);
}
.sv-no.ok i { opacity: 0; transform: scale(.4) rotate(-40deg); }
.sv-no.ok svg { opacity: 1; animation: fxRisca .48s var(--ease-io) .06s forwards; }
@keyframes fxRisca { to { stroke-dashoffset: 0; } }
/* a onda so sai quando o no acabou de fechar, nao a cada repintura */
.sv-no.acendeu::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--accent); animation: fxOnda .75s var(--ease) forwards;
}
@keyframes fxOnda { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.65); opacity: 0; } }

.sv-conta { display: flex; align-items: baseline; gap: 8px; }
.sv-conta b {
  font-family: var(--font-titulo); font-size: 13px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.sv-conta span { font-size: 11.5px; color: var(--txt-3); line-height: 1.4; }

/* ---------------------------------------------------------------------
   CAMPOS: ficha de vidro, rotulo que sobe, linha que nasce no toque
   --------------------------------------------------------------------- */
.fx-campo { position: relative; display: block; }
/* O ninho abraca so o campo. A linha, o rotulo e o visto se medem por
   ele: ancorados no label inteiro, caiam em cima da dica de baixo. */
.fx-ninho { position: relative; display: block; }
.fx-ninho > input, .fx-ninho > textarea {
  /* em bloco: como linha, o campo deixa uma sobra de base embaixo e o
     ninho ficava mais alto que ele, jogando a linha para fora */
  display: block; width: 100%; padding: 26px 42px 11px 15px;
  border: 1px solid var(--line); border-radius: 17px;
  background: var(--surface); color: var(--txt);
  font-family: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.45;
  transition: border-color .45s var(--ease), background .45s var(--ease),
              box-shadow .55s var(--ease), transform .45s var(--spring);
}
.fx-ninho > textarea { resize: none; overflow: hidden; min-height: 92px; padding-top: 28px; }
.fx-ninho > input:focus, .fx-ninho > textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface-2);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 20px 38px -28px var(--accent-glow);
}
.fx-rot {
  position: absolute; left: 16px; top: 18px; pointer-events: none; max-width: calc(100% - 58px);
  font-size: 14.5px; font-weight: 500; color: var(--txt-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform-origin: 0 50%;
  transition: transform .5s var(--spring), color .35s var(--ease), letter-spacing .5s var(--ease);
}
.fx-ninho > input:focus ~ .fx-rot,
.fx-ninho > input:not(:placeholder-shown) ~ .fx-rot,
.fx-ninho > textarea:focus ~ .fx-rot,
.fx-ninho > textarea:not(:placeholder-shown) ~ .fx-rot {
  transform: translateY(-11px) scale(.73); letter-spacing: .05em;
}
.fx-ninho > input:focus ~ .fx-rot,
.fx-ninho > textarea:focus ~ .fx-rot { color: var(--accent); }

/* o visto so e riscado quando o campo passa a ter conteudo */
.fx-ok {
  position: absolute; right: 15px; top: 21px; width: 18px; pointer-events: none;
  color: var(--accent); stroke-width: 2.6;
  stroke-dasharray: 24; stroke-dashoffset: 24; opacity: 0;
  transition: opacity .3s var(--ease);
}
.fx-campo.cheio .fx-ok { opacity: 1; animation: fxRisca .5s var(--ease-io) forwards; }

.fx-dica {
  display: block; margin: 7px 0 0 15px; font-size: 11px; color: var(--accent); line-height: 1.45;
  opacity: 0; transform: translateY(-5px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.fx-campo:focus-within .fx-dica { opacity: 1; transform: none; }

/* ---- campo de dinheiro ---- */
.fx-dinheiro .fx-ninho > input { padding-left: 44px; }
.fx-dinheiro .fx-rot { left: 45px; max-width: calc(100% - 88px); }
.fx-cifrao {
  position: absolute; left: 16px; top: 26px; font-style: normal;
  font-size: 14px; font-weight: 750; color: var(--txt-3);
  transition: color .35s var(--ease), transform .45s var(--spring);
}
.fx-dinheiro:focus-within .fx-cifrao { color: var(--accent); transform: scale(1.06); }

/* ---------------------------------------------------------------------
   ESCOLHAS: um marcador unico que escorrega de uma opcao para a outra
   --------------------------------------------------------------------- */
.fx-titulo { display: block; margin-bottom: 11px; font-size: 12.5px; font-weight: 650; color: var(--txt-2); }
.fx-titulo b { color: var(--accent); font-variant-numeric: tabular-nums; }
.fx-escolhas { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* a pressa vem com explicacao em cada opcao: em duas colunas o texto
   quebra e a terceira fica orfa, entao ela desce em faixas */
.fx-escolhas.sv-pressa { grid-template-columns: 1fr; gap: 7px; }
.sv-pressa .fx-op { padding: 10px 12px; }
.sv-pressa .fx-op-txt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* ele e so um; viaja ate a opcao escolhida e se estica no caminho */
.fx-marca {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  border-radius: 16px; opacity: 0;
  background: linear-gradient(150deg, var(--accent-soft), transparent 70%), var(--surface-2);
  border: 1px solid var(--accent);
  box-shadow: 0 16px 30px -22px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--sx, 1), var(--sy, 1));
  transition: transform .62s var(--spring), width .62s var(--spring),
              height .62s var(--spring), opacity .35s var(--ease);
  will-change: transform;
}
.fx-escolhas.pronta .fx-marca { opacity: 1; }

.fx-op {
  position: relative; z-index: 1; min-width: 0;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px;
  padding: 12px 13px; border-radius: 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .45s var(--spring);
}
.fx-op.on { background: transparent; border-color: transparent; }
.fx-op:hover { border-color: var(--line-forte); transform: translateY(-2px); }
.fx-op.on:hover { border-color: transparent; transform: translateY(-2px); }
.fx-op:active { transform: scale(.965); }
.fx-op-txt { min-width: 0; display: grid; gap: 2px; }
.fx-op b { font-size: 12.5px; font-weight: 700; color: var(--txt-2); transition: color .35s var(--ease); }
.fx-op small { font-size: 10.5px; color: var(--txt-3); line-height: 1.3; }
.fx-op.on b { color: var(--accent); }

.fx-op-ico {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--txt-3);
  transition: background .45s var(--ease), color .35s var(--ease), transform .55s var(--spring);
}
.fx-op-ico svg { width: 16px; stroke-width: 1.9; }
.fx-op.on .fx-op-ico {
  background: linear-gradient(150deg, var(--g-500), var(--g-700)); color: var(--accent-ink);
  transform: rotate(-6deg) scale(1.06);
}
.fx-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------------
   A BATERIA: uma regua que enche em vez de um tracinho
   --------------------------------------------------------------------- */
.fx-bat { position: relative; height: 46px; border-radius: 15px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.fx-bat-nivel {
  position: absolute; inset: 0 auto 0 0; width: var(--pc, 85%);
  background: linear-gradient(90deg, var(--g-700), var(--g-500));
  transition: width .4s var(--ease), background .5s var(--ease);
}
/* o brilho corre por dentro do que ja encheu, como liquido mexendo */
.fx-bat-nivel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%);
  animation: fxCorre 3.4s var(--ease-io) infinite;
}
@keyframes fxCorre { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.fx-bat.fraca .fx-bat-nivel { background: linear-gradient(90deg, #b3581f, #ff9f45); }
/* os tracinhos de leitura ficam por cima, como numa regua de verdade */
.fx-bat-marcas { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 0 10px; align-items: center; pointer-events: none; }
.fx-bat-marcas i { width: 1px; height: 9px; background: var(--line-forte); border-radius: 1px; }
.fx-bat-val {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-family: var(--font-titulo); font-size: 14px; font-weight: 800; letter-spacing: -.02em;
  color: var(--txt); text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  font-variant-numeric: tabular-nums;
}
.fx-faixa input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; cursor: ew-resize; z-index: 2;
}
.fx-faixa input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: none; }
.fx-faixa input[type="range"]::-moz-range-track { height: 100%; background: none; }
.fx-faixa input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 4px; height: 30px; border-radius: 99px; margin-top: 7px;
  background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.fx-faixa input[type="range"]::-moz-range-thumb {
  width: 4px; height: 30px; border: 0; border-radius: 99px;
  background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.fx-faixa input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 15px; }
.fx-regua { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10px; color: var(--txt-3); }

/* ---------------------------------------------------------------------
   O RESULTADO DA AVALIACAO
   --------------------------------------------------------------------- */
.fx-saida {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 3px; justify-items: center; text-align: center;
  padding: 20px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .5s var(--ease), box-shadow .6s var(--ease);
}
.fx-aura {
  position: absolute; inset: -60% 30% 20% -30%; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at 40% 45%, var(--accent-soft), transparent 70%);
  transition: opacity .6s var(--ease);
}
.fx-saida.tem-valor { border-color: var(--accent); box-shadow: 0 24px 48px -34px var(--accent-glow); }
.fx-saida.tem-valor .fx-aura { opacity: 1; animation: fxRespira 9s var(--ease-io) infinite; }
.fx-saida small { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.fx-saida strong {
  font-family: var(--font-titulo); font-size: 31px; font-weight: 800; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; color: var(--txt-2); transition: color .5s var(--ease);
}
.fx-saida.tem-valor strong { color: var(--accent); }
.fx-saida em { font-style: normal; font-size: 11.5px; color: var(--txt-3); }

/* ---------------------------------------------------------------------
   O BOTAO: acende ao ficar pronto, carrega e confirma
   --------------------------------------------------------------------- */
.fx-enviar { position: relative; overflow: hidden; width: 100%; }
.fx-enviar[disabled] { opacity: .42; pointer-events: none; box-shadow: none; filter: saturate(.25); }
.fx-env-conteudo { display: inline-flex; align-items: center; gap: 9px; transition: opacity .25s var(--ease), transform .45s var(--spring); }
.fx-enviar svg { width: 17px; }
/* um claro atravessa o botao no instante em que ele passa a valer */
.fx-env-luz {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 36%, rgba(255, 255, 255, .7) 50%, transparent 64%);
  transform: translateX(-130%);
}
.fx-enviar.acendeu .fx-env-luz { animation: fxVarre 1s var(--ease-io) forwards; }
@keyframes fxVarre { 0% { opacity: 1; transform: translateX(-130%); } 100% { opacity: 0; transform: translateX(130%); } }
/* O pulso vai no miolo, nao no botao. Declarado no botao ele tomava o
   lugar da animacao de entrada; ao sair, a de entrada voltava do zero e
   o botao piscava inteiro. */
.fx-enviar.acendeu .fx-env-conteudo { animation: fxPulso .85s var(--spring); }
@keyframes fxPulso { 0%, 100% { transform: none; } 38% { transform: scale(1.035); } }

.fx-env-carga, .fx-env-ok {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
  transition: opacity .25s var(--ease);
}
.fx-env-carga svg { width: 23px; animation: fxRoda .85s linear infinite; }
.fx-env-carga circle { stroke-dasharray: 46; stroke-dashoffset: 34; stroke-width: 2.6; }
@keyframes fxRoda { to { transform: rotate(360deg); } }
.fx-env-ok svg { width: 25px; stroke-width: 2.8; stroke-dasharray: 26; stroke-dashoffset: 26; }
.fx-enviar.enviando .fx-env-conteudo { opacity: 0; transform: translateY(-130%); }
.fx-enviar.enviando .fx-env-carga { opacity: 1; }
.fx-enviar.feito .fx-env-conteudo { opacity: 0; transform: translateY(-130%); }
.fx-enviar.feito .fx-env-ok { opacity: 1; }
.fx-enviar.feito .fx-env-ok svg { animation: fxRisca .42s var(--ease-io) forwards; }

.fx-nota { font-size: 11px; color: var(--txt-3); line-height: 1.55; }

/* ---- o campo que faltou balanca em vez de so mostrar um aviso ---- */
.fx-campo.treme { animation: fxTreme .5s var(--ease-io); }
.fx-campo.treme input, .fx-campo.treme textarea { border-color: var(--warn); }
@keyframes fxTreme {
  0%, 100% { transform: none; }
  18% { transform: translateX(-7px); }
  38% { transform: translateX(6px); }
  58% { transform: translateX(-4px); }
  78% { transform: translateX(2px); }
}

/* Movimento reduzido: o que e enfeite para, o que e informacao fica.
   A regra global ja encurta tudo; aqui so se apagam os laços infinitos. */
@media (prefers-reduced-motion: reduce) {
  .sv-aro, .sv-ico::after, .sv-luz, .sv-preco::before,
  .fx-bat-nivel::after, .fx-saida.tem-valor .fx-aura { animation: none; }
  .fx > * { filter: none; }
}

.mt-intro { font-size: 13px; color: var(--txt-2); line-height: 1.6; margin-bottom: 14px; }

/* ---------------------------------------------------------------------
   AVISO DO CARRINHO
   O botao da vitrine vira carrinho sem avisar ninguem: na primeira visita
   um balao sobe da barra e aponta para ele.
   --------------------------------------------------------------------- */
.dica-cart {
  position: fixed; z-index: 600; transform: translateX(-50%) translateY(10px) scale(.94);
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: min(300px, calc(100vw - 24px));
  padding: 11px 8px 11px 13px; border-radius: var(--r-md);
  background: var(--glass-forte); border: 1px solid var(--accent);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .8), 0 0 0 4px var(--accent-soft);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .5s var(--spring);
}
.dica-cart.aparece { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
.dica-cart.aparece .dc-ico { animation: dcPula 2.6s var(--ease-io) infinite; }

/* a bequinha aponta para o meio do botao, mesmo com o balao encostado na borda */
.dc-seta {
  position: absolute; bottom: -6px; left: var(--seta-x, 50%); width: 12px; height: 12px;
  margin-left: -6px; transform: rotate(45deg);
  background: var(--glass-forte); border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
}
.dc-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink);
}
.dc-ico svg { width: 18px; }
@keyframes dcPula {
  0%, 82%, 100% { transform: none; }
  88% { transform: translateY(-4px) scale(1.06); }
  94% { transform: translateY(0) scale(1); }
}
.dc-txt { min-width: 0; display: grid; gap: 1px; }
.dc-txt b { font-family: var(--font-titulo); font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.dc-txt small { font-size: 11px; color: var(--txt-3); line-height: 1.35; }
.dc-fechar {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: var(--txt-3); transition: color .3s, background .3s, transform .4s var(--spring);
}
.dc-fechar svg { width: 13px; stroke-width: 2.4; }
.dc-fechar:hover { color: var(--warn); background: var(--surface-2); transform: rotate(90deg); }

/* enquanto o aviso esta de pe, o proprio botao chama a atencao */
#tabVitrine.chamando .tab-morph::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 2px solid var(--accent); animation: dcAnel 2.2s var(--ease-io) infinite;
}
@keyframes dcAnel {
  0% { transform: scale(.7); opacity: .85; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}

/* ---- o botao de aparencia na barra de baixo ---- */
.tab-tema .ic-sun { display: none; }
html[data-theme="light"] .tab-tema .ic-moon { display: none; }
html[data-theme="light"] .tab-tema .ic-sun { display: block; }
.tab-tema svg { transition: transform .5s var(--spring); }
.tab-tema:active svg { transform: rotate(-30deg) scale(.9); }

.menu-label {
  font-family: var(--font-titulo);
  font-size: 11px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--txt-3); font-weight: 700; margin: 22px 0 10px 8px;
}

/* ---- grade de botoes: orcamentos e ajuda ----
   Desenho no lugar do emoji, nome em letra de titulo e uma luz que acende
   por baixo do cartao quando o dedo encosta. */
.menu-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mbtn {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; align-content: start; gap: 9px;
  padding: 15px 9px 13px; border-radius: var(--r-md); text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .45s var(--spring), border-color .35s var(--ease),
              background .35s var(--ease), box-shadow .4s var(--ease);
}
/* a luz que nasce no pe do cartao */
.mbtn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 112%, var(--accent-soft), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
/* o fio de luz que corre no alto */
.mbtn::after {
  content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transform: scaleX(.4); transform-origin: center;
  transition: opacity .4s var(--ease), transform .5s var(--spring);
}
.mbtn:hover {
  transform: translateY(-4px); border-color: var(--accent);
  box-shadow: 0 18px 34px -24px var(--accent-glow);
}
.mbtn:hover::before { opacity: 1; }
.mbtn:hover::after { opacity: 1; transform: scaleX(1); }
.mbtn:active { transform: scale(.96); transition-duration: .12s; }

.mb-ico {
  position: relative; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(150deg, var(--surface-2), transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .5s var(--spring), color .3s var(--ease),
              background .4s var(--ease), box-shadow .4s var(--ease);
}
.mb-ico svg { width: 21px; stroke-width: 1.8; }
.mbtn:hover .mb-ico {
  transform: scale(1.1) rotate(-6deg); color: var(--accent-ink);
  background: linear-gradient(150deg, var(--g-500), var(--g-700));
  box-shadow: 0 10px 22px -10px var(--accent-glow);
}

/* duas linhas reservadas: os botoes da fileira ficam do mesmo tamanho */
.mbtn b {
  font-family: var(--font-titulo);
  font-size: 11.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.005em;
  min-height: 2.6em; color: var(--txt-2);
  transition: color .3s var(--ease);
}
.mbtn:hover b { color: var(--txt); }
.menu-vazio { grid-column: 1 / -1; text-align: center; padding: 18px 0; color: var(--txt-3); font-size: 13px; }

/* ---------------------------------------------------------------------
   CARDS DE SECAO (menu do painel)
   Entrada escalonada, brilho que varre, icone que ganha vida no toque.
   --------------------------------------------------------------------- */
.sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.sec-grid .destaque { grid-column: 1 / -1; }

.seccard {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 11px; padding: 13px 12px; text-align: left;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  opacity: 0; transform: translateY(14px) scale(.96);
  animation: secCardEntra .62s var(--spring) forwards;
  animation-delay: calc(.2s + var(--i, 0) * .055s);
  transition: border-color .35s var(--ease), background .35s var(--ease),
              transform .5s var(--spring), box-shadow .45s var(--ease);
}
.sheet.closing .seccard { animation: none; opacity: 1; transform: none; }

/* no card estreito o texto vai para baixo do icone */
.seccard:not(.destaque) { grid-template-columns: 1fr; gap: 9px; padding: 14px 13px 13px; align-content: start; }
.seccard:not(.destaque) .sc-seta { display: none; }

.sc-ico {
  position: relative; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--accent); flex-shrink: 0;
  transition: transform .55s var(--spring), background .4s var(--ease), box-shadow .45s var(--ease);
}
.sc-ico svg { width: 20px; position: relative; z-index: 2; transition: transform .55s var(--spring); }
.sc-ico::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 50% 120%, var(--accent-soft), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}

.sc-txt { min-width: 0; }
.sc-txt b { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.sc-txt small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--txt-3); }
.seccard.destaque .sc-txt b { font-size: 15px; }
/* reserva duas linhas de legenda: os cards da mesma fileira ficam iguais */
.seccard:not(.destaque) .sc-txt small { min-height: 2.7em; }

.sc-cont {
  position: absolute; top: 11px; right: 11px;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800; font-style: normal;
  font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--txt-3);
  transition: background .35s, color .35s, transform .45s var(--spring);
}

.sc-seta { color: var(--txt-3); opacity: .45; transition: transform .45s var(--spring), color .35s, opacity .35s; }
.sc-seta svg { width: 16px; }

/* varredura de luz: percorre o card quando ele entra */
.sc-brilho {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.1) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: secCardVarre 1.1s var(--ease-io) forwards;
  animation-delay: calc(.42s + var(--i, 0) * .055s);
}
html[data-theme="light"] .sc-brilho { background: linear-gradient(105deg, transparent 38%, rgba(0,0,0,.05) 50%, transparent 62%); }
.sheet.closing .sc-brilho { animation: none; }

/* halo que acende por baixo do card */
.sc-luz {
  position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(130% 110% at 50% 0%, var(--accent-soft), transparent 68%);
  opacity: 0; transition: opacity .45s var(--ease);
}

.seccard:hover { border-color: var(--line-forte); transform: translateY(-3px); box-shadow: 0 18px 34px -26px rgba(0,0,0,.7); }
.seccard:hover .sc-ico { transform: scale(1.07) rotate(-6deg); background: var(--accent-soft); }
.seccard:hover .sc-ico::after { opacity: 1; }
.seccard:hover .sc-luz { opacity: .75; }
.seccard:hover .sc-seta { opacity: 1; color: var(--accent); transform: translateX(3px); }
.seccard:active { transform: scale(.975); transition-duration: .12s; }

/* secao aberta */
.seccard.on { border-color: var(--accent); background: var(--accent-soft); }
.seccard.on .sc-ico { background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink); box-shadow: 0 8px 20px -10px var(--accent-glow); }
.seccard.on .sc-txt b { color: var(--accent); }
.seccard.on .sc-cont { background: var(--accent); color: var(--accent-ink); }
.seccard.on .sc-luz { opacity: 1; }
.seccard.on::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
  animation: secCardTraco .5s var(--spring) forwards;
}

@keyframes secCardEntra {
  0%   { opacity: 0; transform: translateY(14px) scale(.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes secCardVarre {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@keyframes secCardTraco {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.menu-chips { display: grid; gap: 6px; }
.mcat {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: var(--r-md); text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .35s, background .35s, transform .4s var(--spring);
}
.mcat:hover { border-color: rgba(var(--cor), .55); background: var(--surface-2); transform: translateX(3px); }
.mcat-ico {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(var(--cor), .14); color: rgb(var(--cor));
  transition: transform .5s var(--spring);
}
.mcat-ico svg { width: 17px; }
.mcat:hover .mcat-ico { transform: scale(1.07) rotate(-6deg); }
.mcat-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mcat-txt b { font-size: 13.5px; font-weight: 620; }
.mcat-txt i { font-style: normal; font-size: 11px; color: var(--txt-3); }
.mcat-seta { color: var(--txt-3); opacity: .5; transition: transform .4s var(--spring), color .3s, opacity .3s; }
.mcat-seta svg { width: 16px; }
.mcat:hover .mcat-seta { opacity: 1; color: rgb(var(--cor)); transform: translateX(3px); }

.menu-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mcard { display: grid; justify-items: center; gap: 1px; padding: 14px 8px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); transition: transform .4s var(--spring), border-color .3s; }
.mcard:hover { transform: translateY(-3px); border-color: var(--accent); }
.mc-ico { color: var(--accent); margin-bottom: 4px; }
.mc-ico svg { width: 20px; }
.mcard b { font-size: 18px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mcard small { font-size: 10.5px; color: var(--txt-3); }

.tema-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); }
.ts-thumb { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); border-radius: var(--r-pill); background: linear-gradient(145deg, var(--g-500), var(--g-700)); box-shadow: 0 6px 16px -6px var(--accent-glow); transition: transform .55s var(--spring); }
html[data-theme="light"] .ts-thumb { transform: translateX(100%); }
.tema-switch button { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; border-radius: var(--r-pill); font-size: 13px; font-weight: 650; color: var(--txt-2); transition: color .35s var(--ease); }
.tema-switch button svg { width: 16px; }
html[data-theme="dark"] .tema-switch button:first-of-type,
html[data-theme="light"] .tema-switch button:last-of-type { color: var(--accent-ink); }

.menu-rodape { display: grid; gap: 4px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.mlink { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; color: var(--txt-2); text-align: left; transition: background .3s, color .3s, transform .3s var(--ease); }
.mlink svg { width: 17px; }
.mlink:hover { background: var(--surface-2); color: var(--accent); transform: translateX(4px); }

.sheet.center { display: none; place-items: center; padding: 20px; }
.sheet.center.open { display: grid; }
.modal { position: relative; width: min(920px, 100%); max-height: min(88vh, 880px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-xl); animation: entraModal .55s var(--spring) forwards; }
@supports (height: 100dvh) { .modal { max-height: min(88dvh, 880px); } }
@keyframes entraModal { from { opacity: 0; transform: translateY(28px) scale(.95); } to { opacity: 1; transform: none; } }
.sheet.closing .modal { animation: saiModal .3s var(--ease) forwards; }
@keyframes saiModal { to { opacity: 0; transform: translateY(14px) scale(.97); } }
.modal::-webkit-scrollbar { width: 8px; }
.modal::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }
.quick-search { position: relative; width: min(680px, 100%); border-radius: var(--r-lg); overflow: hidden; animation: entraModal .5s var(--spring) forwards; }
.qs-results { max-height: 56vh; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); padding: 8px; }
.qs-item { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; transition: background .25s; width: 100%; text-align: left; }
.qs-item:hover, .qs-item.ativo { background: var(--surface-2); }
.qs-thumb { width: 44px; height: 44px; border-radius: 11px; overflow: hidden; background: var(--img-bg); display: grid; place-items: center; flex-shrink: 0; font-size: 20px; }
.qs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qs-item b { display: block; font-size: 14px; font-weight: 600; }
.qs-item small { color: var(--txt-3); font-size: 12px; }
.qs-item .qp { margin-left: auto; font-weight: 750; color: var(--accent); font-size: 14.5px; white-space: nowrap; }
.qs-empty { padding: 26px; text-align: center; color: var(--txt-3); font-size: 13.5px; }

.sheet.right .drawer { position: absolute; top: 0; bottom: 0; right: 0; width: min(420px, 92vw); border-radius: var(--r-xl) 0 0 var(--r-xl); display: flex; flex-direction: column; animation: entraDir .5s var(--ease) forwards; }
@keyframes entraDir { from { transform: translateX(100%); } to { transform: none; } }
.sheet.right.closing .drawer { animation: saiDir .35s var(--ease) forwards; }
@keyframes saiDir { to { transform: translateX(100%); } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-size: 17px; }
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: grid; gap: 10px; align-content: start; }
.drawer-foot { padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 12px; }
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; }
.drawer-total span { color: var(--txt-2); font-size: 13.5px; }
.drawer-total b { font-size: 25px; font-weight: 800; letter-spacing: -.035em; color: var(--accent); }
.cart-item { display: flex; gap: 12px; padding: 11px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); align-items: center; }
.ci-thumb { width: 54px; height: 54px; border-radius: 11px; overflow: hidden; background: var(--img-bg); display: grid; place-items: center; font-size: 23px; flex-shrink: 0; }
.ci-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ci-body { flex: 1; min-width: 0; }
.cart-item b { display: block; font-size: 14px; font-weight: 600; }
.cart-item small { color: var(--txt-3); font-size: 12px; }
.ci-price { font-weight: 700; color: var(--accent); font-size: 14px; }
.qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; border-radius: 99px; background: var(--surface-2); padding: 2px; }
.qty button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--txt-2); transition: background .25s, color .25s; }
.qty button:hover { background: var(--accent); color: var(--accent-ink); }
.qty b { min-width: 22px; text-align: center; font-size: 13px; }
.ci-del { color: var(--txt-3); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; transition: color .25s, background .25s; flex-shrink: 0; }
.ci-del:hover { color: var(--warn); background: rgba(255,107,107,.12); }
.ci-del svg { width: 16px; }

/* =====================================================================
   MODAL DE PRODUTO
   ===================================================================== */
.pm { display: grid; grid-template-columns: 1.05fr .95fr; }
.pm-media { position: relative; background: var(--img-bg); display: grid; align-content: center; gap: 12px; padding: 22px; }
.pm-main { aspect-ratio: 1/1; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; background: var(--surface); }
.pm-main img { width: 100%; height: 100%; object-fit: cover; animation: aparece .45s var(--ease); }
.pm-main .ph { font-size: 86px; opacity: .3; }
.pm-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-thumbs button { width: 56px; height: 56px; border-radius: 13px; overflow: hidden; border: 2px solid transparent; background: var(--surface); transition: border-color .3s, transform .3s var(--spring); }
.pm-thumbs button:hover { transform: translateY(-3px); }
.pm-thumbs button.on { border-color: var(--accent); }
.pm-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pm-body { padding: 28px; display: grid; gap: 14px; align-content: start; }
.pm-close { position: absolute; top: 14px; right: 14px; z-index: 5; background: var(--glass-forte); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--glass-brd); }
.pm-body h2 { font-size: clamp(21px, 3vw, 28px); }
.pm-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pm-price b { font-size: 33px; font-weight: 800; letter-spacing: -.04em; }
.pm-price s { color: var(--txt-3); font-size: 15px; }
.pm-desc { color: var(--txt-2); font-size: 14.5px; line-height: 1.65; white-space: pre-line; }
.pm-table { display: grid; gap: 1px; border-radius: var(--r-md); overflow: hidden; background: var(--line); }
.pm-table div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 15px; background: var(--surface-solid); font-size: 13.5px; }
.pm-table span { color: var(--txt-2); }
.pm-table b { font-weight: 650; text-align: right; }
.pm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pm-actions .btn { flex: 1; min-width: 140px; }
.bat-bar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; width: 90px; display: inline-block; vertical-align: middle; margin-right: 8px; }
.bat-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--g-700), var(--g-400)); }
.pm-rel { padding: 0 28px 28px; }
.pm-rel h3 { margin-bottom: 14px; font-size: 15px; }

/* =====================================================================
   COMPARADOR
   ===================================================================== */
.barra-comparar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 480; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); display: flex; justify-content: center; animation: sobeBarra .5s var(--spring); }
@keyframes sobeBarra { from { transform: translateY(120%); } to { transform: none; } }
.bc-inner { width: 100%; max-width: 760px; border-radius: var(--r-lg); padding: 12px 14px; display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; }
.bc-itens { display: flex; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.bc-item { display: flex; align-items: center; gap: 8px; padding: 5px 9px 5px 5px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; max-width: 190px; }
.bc-th { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--img-bg); display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }
.bc-th img { width: 100%; height: 100%; object-fit: cover; }
.bc-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-item button { color: var(--txt-3); font-size: 15px; line-height: 1; flex-shrink: 0; }
.bc-item button:hover { color: var(--warn); }
.bc-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.comp-wrap { overflow-x: auto; padding: 0 24px 24px; }
.comp-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.comp-tabela th, .comp-tabela td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.comp-tabela th { color: var(--txt-2); font-weight: 600; width: 150px; font-size: 12.5px; }
.comp-tabela td { font-weight: 600; }
.comp-topo { display: grid; gap: 8px; }
.comp-foto { width: 100%; aspect-ratio: 1/1; max-width: 120px; border-radius: var(--r-sm); overflow: hidden; background: var(--img-bg); display: grid; place-items: center; font-size: 32px; }
.comp-foto img { width: 100%; height: 100%; object-fit: cover; }
.comp-melhor { color: var(--accent); }

/* =====================================================================
   ADMIN — PORTA DE ENTRADA
   ===================================================================== */
.admin-gate { display: grid; place-items: center; min-height: 62vh; }
@supports (height: 100dvh) { .admin-gate { min-height: 62dvh; } }
.gate-card { width: min(420px, 100%); display: grid; gap: 15px; text-align: center; justify-items: center; padding: 34px; }
.gate-card .field { width: 100%; text-align: left; }
.gate-card .btn { width: 100%; }
.gate-card p { color: var(--txt-2); font-size: 14px; }
.gate-card small { color: var(--txt-3); font-size: 12px; }
.gate-icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink); box-shadow: 0 16px 34px -14px var(--accent-glow); }
.gate-icon svg { width: 27px; stroke-width: 2.1; }
.gate-card.shake { animation: treme .45s var(--ease-io); }
@keyframes treme { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }

/* =====================================================================
   PAINEL — CASCA
   ===================================================================== */
body.modo-admin .topbar,
body.modo-admin .tabbar,
body.modo-admin .footer,
body.modo-admin .subir,
body.modo-admin .barra-comparar,
body.modo-admin .spotlight,
body.modo-admin .bg-fx { display: none !important; }
body.modo-admin { background: var(--adm-bg); }
body.modo-admin #app { max-width: none; margin: 0; padding: 0; }
body.modo-admin .view.on { animation: none; }
body.modo-admin .scroll-progress { display: none; }

.adm-shell { display: grid; grid-template-columns: var(--adm-lado) 1fr; min-height: 100vh; }
@supports (height: 100dvh) { .adm-shell { min-height: 100dvh; } }

.adm-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 14px; background: var(--adm-lado-bg); border-right: 1px solid var(--line); }
@supports (height: 100dvh) { .adm-side { height: 100dvh; } }
.adm-logo { display: flex; align-items: center; gap: 11px; padding: 2px 8px 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.adm-logo .brand-mark { width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0; }
.adm-logo b { font-size: 15px; display: block; letter-spacing: -.02em; }
.adm-logo small { font-size: 11.5px; color: var(--txt-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.adm-nav { position: relative; display: grid; gap: 2px; }
.adm-marca {
  position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 0;
  border-radius: var(--r-sm); opacity: 0;
  background: linear-gradient(100deg, var(--accent-soft), transparent);
  border-left: 3px solid var(--accent);
  transition: transform .5s var(--spring), height .35s var(--ease), width .4s var(--spring), opacity .3s;
}
.adm-marca.show { opacity: 1; }
.adm-nav button { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--txt-2); white-space: nowrap; transition: color .3s, transform .3s var(--ease); }
.adm-nav button svg { width: 18px; flex-shrink: 0; transition: transform .4s var(--spring); }
.adm-nav button:hover { color: var(--txt); }
.adm-nav button:hover svg { transform: scale(1.12); }
.adm-nav button.on { color: var(--accent); }
.adm-cont { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--surface-2); color: var(--txt-2); font-size: 11px; font-weight: 700; font-style: normal; display: grid; place-items: center; transition: all .35s var(--ease); }
.adm-nav button.on .adm-cont { background: var(--accent); color: var(--accent-ink); }

.adm-resumo { margin-top: 18px; padding: 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 2px; position: relative; overflow: hidden; }
.adm-resumo::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }
.adm-resumo.ruim::before { background: var(--warn); }
.adm-resumo span { font-size: 11px; color: var(--txt-3); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.adm-resumo b { font-size: 21px; font-weight: 800; letter-spacing: -.035em; color: var(--accent); font-variant-numeric: tabular-nums; }
.adm-resumo.ruim b { color: var(--warn); }
.adm-resumo small { font-size: 11px; color: var(--txt-3); }

.adm-side-foot { margin-top: auto; display: grid; gap: 3px; padding-top: 14px; border-top: 1px solid var(--line); }
.adm-link { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; color: var(--txt-2); text-align: left; transition: background .3s, color .3s, transform .3s var(--ease); }
.adm-link svg { width: 17px; }
.adm-link:hover { background: var(--surface); color: var(--txt); transform: translateX(3px); }
.adm-link.sair:hover { color: var(--warn); }

.adm-corpo { min-width: 0; display: flex; flex-direction: column; }
.adm-cabecalho { position: sticky; top: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 28px 18px; background: color-mix(in srgb, var(--adm-bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .adm-cabecalho { background: var(--adm-bg); } }
.adm-cabecalho h1 { font-size: clamp(22px, 3vw, 30px); }
.adm-cabecalho-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-so-mobile { display: none; }
.adm-tabbar { display: none; }
.adm-painel { padding: 24px 28px 60px; }
.adm-sec { display: none; }
.adm-sec.on { display: block; animation: admEntra .5s var(--ease); }
@keyframes admEntra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   PAINEL — DASHBOARD
   Leitura de cima para baixo: periodo -> numero grande -> cartoes ->
   quebra por pagamento e produto -> ultimas vendas.
   ===================================================================== */

/* ---- filtro de periodo ---- */
.dash-filtro { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.per-chips {
  display: flex; gap: 6px; flex: 1; min-width: 0; padding: 4px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line);
}
.per-chip {
  flex: 0 0 auto; padding: 9px 15px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--txt-2); white-space: nowrap;
  transition: color .3s, background .35s var(--ease), transform .4s var(--spring);
}
.per-chip:hover { color: var(--txt); }
.per-chip.on {
  background: linear-gradient(145deg, var(--g-500), var(--g-700));
  color: var(--accent-ink); box-shadow: 0 6px 18px -8px var(--accent-glow);
}
.per-chip:active { transform: scale(.94); }
.dash-nova { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.dash-nova svg { width: 15px; stroke-width: 2.4; }

/* ---- painel principal: numero + grafico ---- */
.dash-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 22px 22px 16px; margin-bottom: 14px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  animation: dashSobe .6s var(--spring) both;
}
.dh-aura {
  position: absolute; inset: -40% 40% 50% -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 30% 30%, var(--accent-soft), transparent 70%);
  opacity: .9; animation: dhAura 9s var(--ease-io) infinite;
}
@keyframes dhAura { 0%, 100% { transform: none; opacity: .75; } 50% { transform: translate(14px, 10px) scale(1.12); opacity: 1; } }

.dh-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.dh-num { display: grid; gap: 3px; }
.dh-rot { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.dh-num > b {
  font-size: clamp(30px, 7vw, 42px); font-weight: 800; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.dh-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txt-3); }

/* selo de variacao, usado aqui e nos cartoes */
.delta {
  display: inline-flex; align-items: center; gap: 2px; font-style: normal;
  padding: 3px 8px 3px 5px; border-radius: 99px;
  font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.delta svg { width: 12px; stroke-width: 2.6; }
.delta.bom { color: var(--accent); background: var(--accent-soft); }
.delta.ruim { color: var(--warn); background: rgba(255,107,107,.13); }
.delta.neutro { color: var(--txt-3); background: var(--surface-2); padding: 3px 9px; }

/* abas da metrica, com o mesmo indicador deslizante das barras */
.dh-abas { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); }
.dh-thumb {
  position: absolute; top: 0; left: 0; border-radius: var(--r-pill);
  background: var(--adm-bg, var(--bg)); box-shadow: var(--shadow-sm);
  opacity: 0; transition: transform .5s var(--spring), width .4s var(--ease), height .4s var(--ease), opacity .3s;
}
.dh-thumb.show { opacity: 1; }
.dh-abas button {
  position: relative; z-index: 2; padding: 7px 13px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 650; color: var(--txt-3); white-space: nowrap; transition: color .35s;
}
.dh-abas button.on { color: var(--accent); }

/* ---- grafico ---- */
.dh-grafico { position: relative; }
/* pan-y deixa a pagina rolar com o dedo por cima do grafico, mas entrega
   os eventos horizontais para a dica seguir o toque */
.dg-wrap { position: relative; touch-action: pan-y; }
.dg-svg { width: 100%; height: 170px; display: block; overflow: visible; }
.dg-grade { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; opacity: .7; }
.dg-area { stroke: none; opacity: 0; animation: dgSurge 1s var(--ease) .3s forwards; }
@keyframes dgSurge { to { opacity: 1; } }
.dg-linha {
  fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 3px 8px var(--accent-glow)); vector-effect: non-scaling-stroke;
}
.dg-pico { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; opacity: 0; animation: dgPico .5s var(--spring) 1.1s forwards; }
@keyframes dgPico { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
/* o svg global pinta tudo com stroke: currentColor, entao texto e areas
   de toque precisam desligar o traco na mao. */
.dg-rot { fill: var(--txt-3); stroke: none; font-size: 9.5px; font-weight: 650; letter-spacing: .04em; }
/* em tela larga o grafico ganha altura e os rotulos acompanham */
.dg-svg.largo .dg-rot { font-size: 11px; }
.dg-eixo { fill: var(--txt-3); stroke: none; font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums; opacity: .85; }
.dg-hit { fill: transparent; stroke: none; }
.dg-mira, .dg-marca { opacity: 0; transition: opacity .2s; }
.dg-mira { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; }
.dg-marca { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; }
.dg-svg.mirando .dg-mira { opacity: .55; }
.dg-svg.mirando .dg-marca { opacity: 1; }
.dg-dica {
  position: absolute; top: 6px; transform: translate(-50%, 0) scale(.92); transform-origin: top center;
  padding: 6px 11px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  background: var(--glass-forte); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-brd); box-shadow: var(--shadow-sm);
  font-size: 11.5px; font-weight: 650; color: var(--txt);
  opacity: 0; transition: opacity .22s var(--ease), transform .3s var(--spring);
}
.dg-dica.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

.dh-pes { display: flex; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.dh-pes span { flex: 1; display: grid; gap: 1px; min-width: 0; }
.dh-pes small { font-size: 10.5px; color: var(--txt-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
.dh-pes b { font-size: 15px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dh-pes b.verde { color: var(--accent); }
.dh-pes b.vermelho { color: var(--warn); }

/* ---- cartoes de metrica ---- */
.met-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 11px; margin-bottom: 14px; }
.met {
  position: relative; overflow: hidden; display: grid; gap: 3px; padding: 15px 16px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  animation: dashSobe .55s var(--spring) both; animation-delay: calc(var(--i, 0) * .05s);
  transition: border-color .35s, transform .45s var(--spring), box-shadow .4s;
}
.met::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.met:hover { transform: translateY(-3px); border-color: var(--line-forte); box-shadow: 0 18px 36px -26px rgba(0,0,0,.65); }
.met:hover::after { transform: scaleX(1); }
.met header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.met-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.met-ico svg { width: 16px; }
.met-ico.verde { background: var(--accent-soft); color: var(--accent); }
.met-ico.vermelho { background: rgba(255,107,107,.13); color: var(--warn); }
.met-ico.neutro { background: var(--surface-2); color: var(--txt-2); }
.met-rot { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.met > b { font-size: clamp(20px, 2.2vw, 25px); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.met > b.vermelho { color: var(--warn); }
.met > small { font-size: 11.5px; color: var(--txt-3); }

/* ---- cartoes de bloco ---- */
.dash-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 11px; margin-bottom: 14px; }
.dash-card {
  padding: 18px; margin-bottom: 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  animation: dashSobe .55s var(--spring) both;
}
.dash-duo .dash-card { margin-bottom: 0; }
.dc-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.dc-topo h4 { font-size: 13.5px; font-weight: 650; }
.dc-link { padding: 9px 2px; font-size: 12px; font-weight: 650; color: var(--accent); cursor: pointer; transition: opacity .3s; }
.dc-link:hover { opacity: .7; }
.dash-vazio { text-align: center; padding: 26px 0; color: var(--txt-3); font-size: 13px; }

/* =====================================================================
   FORMAS DE PAGAMENTO — TUDO DENTRO DO ANEL
   Nao ha legenda do lado de fora: o nome e o valor de cada forma correm na
   curva da propria fatia, a porcentagem anda sobre a cor e o miolo guarda o
   total. Acender uma forma acende as quatro leituras de uma vez.
   ===================================================================== */
.pag { display: grid; justify-items: center; gap: 6px; }

.pag-anel {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  animation: pagEntra .75s var(--spring) both;
}
@keyframes pagEntra { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }

/* o halo e a mesma divisao do anel, so que derretida */
.pag-aura {
  position: absolute; inset: 20%; border-radius: 50%; pointer-events: none;
  filter: blur(20px); opacity: .3; animation: pagGira 26s linear infinite;
}
html[data-theme="light"] .pag-aura { opacity: .22; }
@keyframes pagGira { to { transform: rotate(360deg); } }

.pag-anel svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.pag-trilho { fill: none; stroke: var(--surface-2); stroke-width: 12; }

.pag-fatia {
  fill: none; stroke-width: 12; stroke-linecap: butt; cursor: pointer; outline: none;
  filter: drop-shadow(0 0 5px var(--brilho));
  transition: stroke-dasharray 1s var(--ease), stroke-width .45s var(--spring),
              opacity .35s var(--ease), filter .35s var(--ease);
}
.pag-fatia.viva { stroke-width: 15.5; filter: drop-shadow(0 0 12px var(--brilho)); }
.pag-fatia.apagada { opacity: .15; filter: none; }
.pag-fatia:focus-visible { stroke-width: 15.5; filter: drop-shadow(0 0 12px var(--brilho)); }

/* nome e valor correndo na curva da fatia */
.pag-rot {
  fill: var(--txt-2); stroke: none; cursor: pointer;
  font-size: 6.4px; font-weight: 700; letter-spacing: .02em;
  opacity: 0; animation: pagTexto .6s var(--ease) forwards;
  transition: fill .3s var(--ease), opacity .3s var(--ease);
}
@keyframes pagTexto { to { opacity: 1; } }
.pag-rot.viva { fill: var(--txt); }
.pag-rot.apagado { opacity: .22; }

/* a porcentagem anda sobre a propria cor; o halo escuro deixa ela legivel
   em cima de qualquer tom, do verde claro ao roxo escuro */
.pag-pc-arco {
  fill: #fff; font-size: 6.2px; font-weight: 800; letter-spacing: .01em;
  paint-order: stroke; stroke: rgba(0, 0, 0, .42); stroke-width: 2.4; stroke-linejoin: round;
  pointer-events: none; opacity: 0; animation: pagTexto .5s var(--ease) forwards;
  transition: opacity .3s var(--ease);
}
.pag-pc-arco.apagado { opacity: .12; }

/* cada venda e um ponto na orbita de dentro, na cor de quem pagou */
.pag-ponto {
  stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: pagPonto .5s var(--spring) forwards;
  animation-delay: calc(1.15s + var(--j, 0) * .028s);
  transition: fill-opacity .3s var(--ease);
}
@keyframes pagPonto { from { opacity: 0; transform: scale(0); } to { opacity: .9; transform: none; } }
.pag-ponto.apagado { fill-opacity: .14; }
.pag-nota { font-size: 9.5px; letter-spacing: .05em; color: var(--txt-3); }

/* o miolo troca de rosto quando uma forma e acesa */
.pag-centro { position: absolute; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.pc-face {
  grid-area: 1 / 1; display: grid; justify-items: center; gap: 2px; text-align: center;
  transition: opacity .35s var(--ease), transform .45s var(--spring);
}
.pc-face small {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3);
}
.pc-face small i { width: 8px; height: 8px; border-radius: 3px; }
.pc-face small em { font-style: normal; }
.pc-face b { font-size: 26px; font-weight: 800; letter-spacing: -.045em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pc-face span { font-size: 11.5px; color: var(--txt-3); }
.pc-foco { opacity: 0; transform: scale(.88); }
.pag.focado .pc-geral { opacity: 0; transform: scale(.88); }
.pag.focado .pc-foco { opacity: 1; transform: none; }

/* selo no cabecalho da secao: quem lidera o periodo */
.pag-destaque {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 99px; background: var(--surface-2);
  font-size: 11px; font-weight: 700; color: var(--txt-2); white-space: nowrap;
  animation: dashEntraX .5s var(--ease) both .3s;
}
.pag-destaque:empty { display: none; }
.pag-destaque i { width: 7px; height: 7px; border-radius: 3px; background: linear-gradient(145deg, var(--c1), var(--c2)); }

/* ---- ranking de produtos ---- */
.rank { display: grid; gap: 13px; list-style: none; counter-reset: none; }
.rank li {
  display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
  opacity: 0; animation: dashEntraX .5s var(--ease) both; animation-delay: calc(.2s + var(--i, 0) * .07s);
}
.rank-pos {
  width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
  font-size: 11.5px; font-weight: 800; background: var(--surface-2); color: var(--txt-3);
}
.rank-pos.p1 { background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink); box-shadow: 0 5px 14px -6px var(--accent-glow); }
.rank-pos.p2 { background: var(--accent-soft); color: var(--accent); }
.rank-corpo { min-width: 0; display: grid; gap: 5px; }
.rank-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rank-topo b { font-size: 13px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-topo em { font-style: normal; font-size: 13px; font-weight: 780; color: var(--accent); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.rank-trilho { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.rank-trilho i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--g-700), var(--g-400)); animation: rankCresce .9s var(--ease) both; }
@keyframes rankCresce { to { width: var(--w); } }
.rank-corpo small { font-size: 11px; color: var(--txt-3); }

/* ---- ultimas vendas ---- */
.vlist { display: grid; gap: 2px; list-style: none; }
.vlist li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 11px 10px; border-radius: var(--r-sm);
  opacity: 0; animation: dashEntraX .5s var(--ease) both; animation-delay: calc(.2s + var(--i, 0) * .06s);
  transition: background .3s;
}
.vlist li:hover { background: var(--surface-2); }
.vl-ini {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 800;
}
.vl-corpo { min-width: 0; display: grid; gap: 1px; }
.vl-corpo b { font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-corpo small { font-size: 11px; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-dir { display: grid; justify-items: end; gap: 4px; flex-shrink: 0; }
.vl-dir b { font-size: 13.5px; font-weight: 780; font-variant-numeric: tabular-nums; }
.pill {
  font-style: normal; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 750;
  white-space: nowrap;
}
.pill.bom { background: var(--accent-soft); color: var(--accent); }
.pill.morno { background: rgba(255,176,32,.14); color: #e59b16; }
.pill.ruim { background: rgba(255,107,107,.13); color: var(--warn); }
html[data-theme="dark"] .pill.morno { color: #ffc14d; }

/* ---- contador do cabecalho do bloco ---- */
.dc-cont {
  padding: 4px 10px; border-radius: 99px; background: var(--surface-2);
  font-size: 11px; font-weight: 700; color: var(--txt-3); font-variant-numeric: tabular-nums;
}

/* ---- busca + filtro das listas de movimento ---- */
.mov-filtros { display: flex; gap: 10px; align-items: center; margin-bottom: 13px; flex-wrap: wrap; }
.mov-filtros .search-wrap { flex: 1 1 200px; min-width: 0; }
.mov-filtros .seg-sub { margin-bottom: 0; flex: 0 1 auto; max-width: 100%; }
.mov-filtros .seg-sub button { padding: 7px 13px; font-size: 12.5px; }

/* ---- lista de movimento (vendas e despesas) ---- */
.mov { display: grid; gap: 2px; list-style: none; }
.mov li {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "ico corpo valor selo acoes";
  padding: 11px 10px; border-radius: var(--r-sm);
  opacity: 0; animation: dashEntraX .5s var(--ease) both; animation-delay: calc(.12s + var(--i, 0) * .045s);
  transition: background .3s;
}
.mov-ico { grid-area: ico; }
.mov-corpo { grid-area: corpo; }
.mov-valor { grid-area: valor; }
.mov-selo { grid-area: selo; }
.mov-acoes { grid-area: acoes; }
.mov li:hover { background: var(--surface-2); }
.mov-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.mov-ico svg { width: 18px; }
.mov-ico.verde { background: var(--accent-soft); color: var(--accent); }
.mov-ico.vermelho { background: rgba(255,107,107,.13); color: var(--warn); }
.mov-corpo { min-width: 0; display: grid; gap: 1px; }
.mov-corpo b { font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov-corpo small { font-size: 11px; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov-valor { font-size: 13.5px; font-weight: 780; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mov-valor.vermelho { color: var(--warn); }
.mov-selo:empty { display: none; }
.mov-acoes { display: flex; gap: 2px; flex-shrink: 0; }
.mov-acoes .icon-btn { width: 34px; height: 34px; }
.mov-acoes .icon-btn svg { width: 16px; }
.mov-acoes .icon-btn.del:hover { color: var(--warn); }

/* ---- quebra por categoria (despesas) ---- */
.quebra { display: grid; gap: 13px; list-style: none; }
.quebra li { display: grid; gap: 6px; opacity: 0; animation: dashEntraX .5s var(--ease) both; animation-delay: calc(.18s + var(--i, 0) * .07s); }
.qb-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qb-topo b { font-size: 13px; font-weight: 620; }
.qb-topo em { font-style: normal; display: inline-flex; align-items: baseline; gap: 7px; font-size: 13px; font-weight: 780; font-variant-numeric: tabular-nums; }
.qb-topo em span { font-size: 11px; font-weight: 700; color: var(--txt-3); }
.qb-trilho { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.qb-trilho i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #c0392b, var(--warn)); animation: rankCresce .9s var(--ease) both; }

.dash-vazio small { display: block; margin-top: 7px; font-size: 11.5px; opacity: .8; }

/* =====================================================================
   PAINEL — CATALOGO DE PRODUTOS
   Aqui nao ha periodo nem grafico: sao coisas com foto, estado e estoque.
   Por isso o desenho e de vitrine, nao de relatorio.
   ===================================================================== */
.cat-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.cat-toolbar .search-wrap { flex: 1; min-width: 0; max-width: 420px; }

.cat-linha { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cat-linha .seg-sub { margin-bottom: 0; flex: 1; min-width: 0; }

.agrupar {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 650; color: var(--txt-2);
  transition: all .35s var(--ease);
}
.agrupar svg { width: 15px; }
.agrupar:hover { border-color: var(--line-forte); color: var(--txt); }
.agrupar.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.agrupar:active { transform: scale(.95); }

/* faixa de resumo: o que precisa de atencao */
.cat-resumo { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.cr-item {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600; color: var(--txt-3);
  transition: border-color .3s, color .3s, transform .35s var(--spring);
}
.cr-item b { font-size: 13px; font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
.cr-item[data-cond] { cursor: pointer; }
.cr-item[data-cond]:hover { border-color: var(--line-forte); transform: translateY(-2px); }
.cr-item.aviso b { color: #e59b16; }
.cr-item.alerta b { color: var(--warn); }
html[data-theme="dark"] .cr-item.aviso b { color: #ffc14d; }

/* ---------------------------------------------------------------------
   GAVETA
   Uma lista de grupos que se abrem no lugar. A altura e medida no JS;
   aqui ficam so os quatro movimentos que disparam junto com ela.
   --------------------------------------------------------------------- */
.gaveta {
  position: relative; isolation: isolate; overflow: hidden;
  margin-bottom: 9px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  animation: dashSobe .5s var(--spring) both; animation-delay: calc(var(--i, 0) * .05s);
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}

/* 3. a faixa acende: clarao nascendo embaixo do azulejo, de onde o olho vem */
.gaveta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 150% at 34px 100%, rgba(var(--cor), .22), transparent 72%),
    linear-gradient(180deg, rgba(var(--cor), .07), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.gaveta.aberta::before { opacity: 1; }
.gaveta.aberta {
  border-color: rgba(var(--cor), .42);
  box-shadow: 0 22px 46px -28px rgba(var(--cor), .55);
}

/* ---- puxador ---- */
.gaveta__puxar {
  position: relative; width: 100%; display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; text-align: left; transition: background .3s var(--ease);
}
.gaveta__puxar:hover { background: var(--surface-2); }
.gaveta.aberta .gaveta__puxar:hover { background: transparent; }
.gaveta__puxar:focus-visible { outline: 2px solid rgba(var(--cor), .9); outline-offset: -2px; border-radius: var(--r-md); }

/* 1. o azulejo gira e cresce: parece que a peca girou para abrir */
.gaveta__ico {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--txt-2);
  transition: transform .55s var(--spring), background .45s var(--ease),
              color .45s var(--ease), box-shadow .5s var(--ease);
}
.gaveta__ico svg { width: 19px; }
.gaveta.aberta .gaveta__ico {
  transform: rotate(-8deg) scale(1.08);
  background: rgba(var(--cor), .16);
  color: rgb(var(--cor));
  box-shadow: 0 10px 24px -10px rgba(var(--cor), .75);
}

.gaveta__nome { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gaveta__nome b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.gaveta__nome i { font-style: normal; font-size: 11.5px; color: var(--txt-3); }
.gaveta.aberta .gaveta__nome b { color: rgb(var(--cor)); }

/* 2. a seta vira para baixo e assume a cor do grupo */
.gaveta__seta {
  flex-shrink: 0; color: var(--txt-3); display: grid; place-items: center;
  transition: transform .5s var(--spring), color .4s var(--ease);
}
.gaveta__seta svg { width: 17px; }
.gaveta.aberta .gaveta__seta { transform: rotate(90deg); color: rgb(var(--cor)); }

/* ---- o vao: a altura vem do JS, aqui so o corte ---- */
.gaveta__vao { overflow: hidden; }
.gaveta__dentro { padding-bottom: 14px; }

/* ---------------------------------------------------------------------
   TRILHO — fileira horizontal de cards que sangra ate a borda da tela
   --------------------------------------------------------------------- */
.trilho {
  display: flex; gap: 11px;
  margin-inline: calc(var(--recuo, 20px) * -1);
  padding-inline: var(--recuo, 20px);
  scroll-snap-type: x proximity; scroll-padding-inline: var(--recuo, 20px);
  overscroll-behavior-x: contain;
}
.trilho > * { flex: 0 0 auto; scroll-snap-align: start; }

/* classe dobrada de proposito: .trilho--gaveta sozinho empata com .trilho,
   e a regra base vence por vir depois. Dentro da gaveta nao ha sangria. */
.trilho.trilho--gaveta {
  margin-inline: 0;
  padding-inline: 15px;
  scroll-padding-inline: 15px;
  padding-bottom: 2px;
}
.trilho.trilho--gaveta > .pcard { width: 168px; }
.trilho.trilho--gaveta > .prod { width: 194px; }
.trilho > .prod { width: 194px; }

/* 4. os itens entram em cascata, deslizando da direita */
.gaveta__dentro .pcard {
  animation: gavCard .52s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes gavCard {
  from { opacity: 0; transform: translateX(26px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---- grade de produtos ---- */
/* aviso de quem saiu da vitrine por falta de estoque */
.prod-aviso {
  display: flex; align-items: flex-start; gap: 9px; margin-bottom: 13px;
  padding: 11px 14px; border-radius: var(--r-sm);
  background: rgba(255, 107, 107, .08); border: 1px dashed rgba(255, 107, 107, .35);
  font-size: 12.5px; line-height: 1.5; color: var(--txt-2);
  animation: dashEntraX .45s var(--ease) both;
}
.prod-aviso svg { width: 16px; flex-shrink: 0; margin-top: 1px; color: var(--warn); }

.pgrade { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 11px; }

.pcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line);
  animation: dashSobe .5s var(--spring) both; animation-delay: calc(.1s + var(--i, 0) * .04s);
  transition: border-color .35s, transform .45s var(--spring), box-shadow .4s;
}
.gaveta .pcard { background: var(--adm-bg, var(--bg)); }
.pcard:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 20px 38px -26px var(--accent-glow); }

.pc-media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--surface); display: grid; place-items: center;
}
.pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pcard:hover .pc-media img { transform: scale(1.06); }
.pc-semfoto { display: grid; justify-items: center; gap: 7px; color: var(--txt-3); opacity: .55; }
.pc-semfoto svg { width: 38px; stroke-width: 1.4; }
.pc-semfoto small { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

.pc-cond {
  position: absolute; top: 8px; left: 8px; padding: 4px 9px; border-radius: 99px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.pc-cond.novo { background: var(--accent); color: var(--accent-ink); }
.pc-cond.semi { background: #3d8bff; color: #fff; }
.pc-cond.usado { background: #f0a92b; color: #2a1c00; }

.pc-estoque {
  position: absolute; top: 8px; right: 8px; padding: 4px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 750; font-variant-numeric: tabular-nums;
  background: var(--glass-forte); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd); color: var(--txt-2);
}
.pc-estoque.baixo { color: #e59b16; border-color: rgba(229,155,22,.45); }
.pc-estoque.zero { background: var(--warn); border-color: var(--warn); color: #fff; }

.pc-estrela {
  position: absolute; bottom: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent);
  background: var(--glass-forte); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd);
}
.pc-estrela svg { width: 13px; stroke: none; }

.pc-corpo { display: grid; gap: 2px; padding: 11px 12px 13px; padding-right: 44px; }
.pc-nome {
  font-size: 13px; font-weight: 620; line-height: 1.3; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-preco { font-size: 16px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pc-margem { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--txt-3); }
.pc-ponto { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pc-ponto.bom { background: var(--accent); }
.pc-ponto.morno { background: #e59b16; }
.pc-ponto.ruim { background: var(--warn); }

.pc-mais {
  position: absolute; right: 5px; bottom: 7px; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; color: var(--txt-3);
  transition: background .3s, color .3s, transform .35s var(--spring);
}
.pc-mais svg { width: 18px; }
.pc-mais:hover { background: var(--surface-2); color: var(--accent); }
.pc-mais:active { transform: scale(.9); }

/* ---- folha de acoes do produto ---- */
.pa-lista { display: grid; gap: 3px; margin: -8px 0; }
.pa-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 12px;
  border-radius: var(--r-sm); text-align: left;
  font-size: 14px; font-weight: 600; color: var(--txt);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.pa-item:hover { background: var(--surface-2); transform: translateX(3px); }
.pa-ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--surface-2); color: var(--accent);
}
.pa-ico svg { width: 17px; }
.pa-item.perigo { color: var(--warn); }
.pa-item.perigo .pa-ico { background: rgba(255,107,107,.12); color: var(--warn); }

@keyframes kpiEntra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dashSobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dashEntraX { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   PAINEL — ATALHOS
   ===================================================================== */
.adm-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 14px; }
.atalho {
  position: relative; overflow: hidden; display: grid; gap: 3px; padding: 20px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); text-align: left;
  opacity: 0; transform: translateY(12px); animation: kpiEntra .55s var(--ease) forwards;
  transition: transform .4s var(--spring), border-color .3s, box-shadow .4s;
}
.atalho:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 20px 40px -24px var(--accent-glow); }
.at-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 10px; transition: transform .45s var(--spring); }
.at-ico svg { width: 20px; }
.atalho:hover .at-ico { transform: scale(1.1) rotate(-6deg); }
.atalho b { font-size: 14.5px; }
.atalho small { font-size: 12.5px; color: var(--txt-3); }
.at-seta { position: absolute; right: 18px; top: 22px; color: var(--txt-3); opacity: 0; transform: translateX(-6px); transition: all .35s var(--ease); }
.at-seta svg { width: 17px; }
.atalho:hover .at-seta { opacity: 1; transform: none; color: var(--accent); }

/* =====================================================================
   PAINEL — LISTAS
   ===================================================================== */
.adm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.adm-toolbar .search-wrap { max-width: 320px; }
.adm-mini-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.mini-kpi { padding: 10px 16px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 1px; }
.mini-kpi span { font-size: 10.5px; color: var(--txt-3); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.mini-kpi b { font-size: 17px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mini-kpi b.verde { color: var(--accent); }
.mini-kpi b.vermelho { color: var(--warn); }

/* sub-abas do Conteudo: precisam caber e rolar em telas estreitas */
.seg-sub {
  margin-bottom: 18px; max-width: 100%;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.seg-sub::-webkit-scrollbar { display: none; }
.seg-sub button, .adm-abas button { flex: 0 0 auto; }
.adm-sub { display: none; }
.adm-sub.on { display: block; animation: admEntra .4s var(--ease); }

.adm-list { display: grid; gap: 10px; }
.adm-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 15px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  opacity: 0; transform: translateY(10px); animation: kpiEntra .5s var(--ease) forwards;
  transition: border-color .3s, transform .3s var(--ease), box-shadow .35s;
}
.adm-row:hover { border-color: var(--accent); transform: translateX(3px); box-shadow: 0 14px 30px -24px var(--accent-glow); }
.adm-thumb { width: 50px; height: 50px; border-radius: 13px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; flex-shrink: 0; color: var(--txt-3); }
.adm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-thumb.verde { background: var(--accent-soft); color: var(--accent); }
.adm-thumb.vermelho { background: rgba(255,107,107,.12); color: var(--warn); }
.adm-sem-foto svg { width: 22px; }
.adm-main { flex: 1; min-width: 0; }
.adm-main b { display: block; font-size: 14.5px; font-weight: 650; }
.adm-main small { color: var(--txt-3); font-size: 12px; display: block; }
.adm-tags { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.adm-valor { font-size: 16px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.adm-valor.vermelho { color: var(--warn); }
.adm-actions { display: flex; gap: 6px; flex-shrink: 0; }
.adm-actions .icon-btn { width: 34px; height: 34px; background: var(--surface-2); }
.adm-actions .icon-btn svg { width: 16px; }
.adm-actions .icon-btn.del:hover { background: rgba(255,107,107,.15); color: var(--warn); }

.adm-vazio { text-align: center; padding: 56px 20px; border-radius: var(--r-md); background: var(--surface); border: 1px dashed var(--line-forte); }
.adm-vazio > span { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--surface-2); color: var(--txt-3); margin-bottom: 14px; }
.adm-vazio svg { width: 26px; }
.adm-vazio h3 { margin-bottom: 6px; }
.adm-vazio p { color: var(--txt-2); font-size: 13.5px; max-width: 46ch; margin: 0 auto; }

/* =====================================================================
   PAINEL — FORMULARIOS E AJUSTES
   ===================================================================== */
.adm-form { display: grid; gap: 16px; }
.adm-form h3 { margin-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.adm-form h3:first-child { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.adm-form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

.aviso-margem { padding: 11px 15px; border-radius: var(--r-sm); font-size: 13px; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--txt); animation: admEntra .35s var(--ease); }
.aviso-margem b { color: var(--accent); }
.aviso-margem.ruim { background: rgba(255,107,107,.1); border-color: var(--warn); }
.aviso-margem.ruim b { color: var(--warn); }

.adm-abas { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.adm-abas::-webkit-scrollbar { display: none; }
.adm-abas button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--txt-2); white-space: nowrap; transition: all .35s var(--ease); }
.adm-abas button svg { width: 16px; }
.adm-abas button:hover { color: var(--txt); border-color: var(--line-forte); }
.adm-abas button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.adm-aj { display: none; }
.adm-aj.on { display: block; animation: admEntra .4s var(--ease); }

.img-list { display: flex; gap: 9px; flex-wrap: wrap; }
.img-item { position: relative; width: 70px; height: 70px; border-radius: 13px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.img-item img { width: 100%; height: 100%; object-fit: cover; }
.img-item button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.img-add { width: 70px; height: 70px; border-radius: 13px; border: 1.5px dashed var(--line-forte); display: grid; place-items: center; color: var(--txt-3); font-size: 22px; transition: border-color .3s, color .3s, transform .3s var(--spring); }
.img-add:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.04); }
/* =====================================================================
   FORMULARIO DE VENDA — O VISOR DE CAIXA
   O valor manda na tela. Cada escolha virou cartao, ficha ou chave, e o
   lucro e medido ao vivo numa faixa que muda de cor enquanto se digita.
   ===================================================================== */
/* minmax(0,1fr) e o que impede o campo gigante do visor de empurrar a
   coluna inteira para alem da largura do modal */
/* um formulario largo demais cansa a leitura: esse modal e mais estreito */
.modal.modal--venda { width: min(560px, 100%); }
.vf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; min-width: 0; }
.vf > * { opacity: 0; animation: vfSobe .55s var(--spring) forwards; animation-delay: calc(var(--i, 0) * .06s); }
@keyframes vfSobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- o visor ---- */
.vf-visor {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 12px; padding: 18px 18px 16px;
  border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line);
  transition: border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.vf.tem-valor .vf-visor { border-color: var(--accent); box-shadow: 0 22px 46px -32px var(--accent-glow); }
.vf-aura {
  position: absolute; inset: -60% 40% 30% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 30% 40%, var(--accent-soft), transparent 70%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.vf.tem-valor .vf-aura { opacity: 1; animation: vfAura 9s var(--ease-io) infinite; }
@keyframes vfAura { 0%, 100% { transform: none; } 50% { transform: translate(16px, 10px) scale(1.14); } }

/* o pisca de quando a vitrine preenche tudo sozinha. Ele mora num
   ::after: trocar a animacao do proprio visor apagaria a entrada dele. */
.vf-visor.encheu::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: vfEncheu .7s var(--ease);
}
@keyframes vfEncheu {
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  35% { box-shadow: 0 0 0 7px var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.vf-money { display: grid; gap: 3px; cursor: text; }
.vf-rot { font-size: 10.5px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; color: var(--txt-3); }
.vf-linha { display: flex; align-items: baseline; gap: 7px; }
.vf-linha i {
  font-style: normal; font-size: 19px; font-weight: 750; color: var(--txt-3);
  transition: color .35s var(--ease);
}
.vf.tem-valor .vf-linha i { color: var(--accent); }
.vf-linha input {
  flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: none; color: var(--txt);
  font-size: clamp(32px, 11vw, 42px); font-weight: 800; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.vf-linha input:focus { outline: none; }
.vf-linha input::placeholder { color: var(--txt-3); opacity: .4; }
/* o numero ja e o campo: as setinhas do navegador so atrapalham */
.vf-linha input::-webkit-outer-spin-button,
.vf-linha input::-webkit-inner-spin-button,
.vf-custo input::-webkit-outer-spin-button,
.vf-custo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vf-linha input, .vf-custo input { appearance: textfield; -moz-appearance: textfield; }

.vf-custo-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.vf-custo {
  flex: 0 1 auto; display: flex; align-items: baseline; gap: 6px; min-width: 0;
  padding: 7px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line);
  transition: border-color .3s, box-shadow .3s;
}
.vf-custo:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.vf-custo > span { font-size: 11.5px; font-weight: 650; color: var(--txt-3); }
.vf-custo i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--txt-3); }
.vf-custo input {
  width: 5.5ch; min-width: 0; padding: 0; border: 0; background: none; color: var(--txt);
  font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.vf-custo input:focus { outline: none; }

.vf-lucro { margin-left: auto; display: grid; justify-items: end; gap: 1px; text-align: right; }
.vf-lucro b { font-size: 16px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--txt-3); transition: color .35s var(--ease); }
.vf-lucro small { font-size: 10.5px; color: var(--txt-3); }
.vf-lucro.boa b, .vf-lucro.media b { color: var(--accent); }
.vf-lucro.baixa b { color: #e59b16; }
.vf-lucro.ruim b { color: var(--warn); }
html[data-theme="dark"] .vf-lucro.baixa b { color: #ffc14d; }

/* a faixa conta a margem antes do numero */
.vf-barra { height: 5px; border-radius: 99px; background: var(--surface); overflow: hidden; }
.vf-barra i {
  display: block; width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--g-500), var(--g-700));
  transition: width .6s var(--spring), background .4s var(--ease);
}
.vf-barra i.media { background: linear-gradient(90deg, #7ee8a8, var(--g-700)); }
.vf-barra i.baixa { background: linear-gradient(90deg, #ffc14d, #e59b16); }
.vf-barra i.ruim { background: linear-gradient(90deg, #ff8f8f, var(--warn)); }
/* sem custo informado: nao ha margem para pintar */
.vf-barra i.sem { background: repeating-linear-gradient(115deg, var(--surface-2) 0 6px, transparent 6px 12px); }
.vf-lucro.sem b { color: var(--txt-2); }

/* ---- blocos ---- */
.vf-bloco { display: grid; gap: 11px; }
.vf-cab { display: flex; align-items: center; gap: 8px; }
.vf-cab svg { width: 16px; color: var(--accent); flex-shrink: 0; }
.vf-cab b { font-size: 13px; font-weight: 700; }
.vf-cab small { margin-left: auto; font-size: 11px; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }

/* ---- trilho da vitrine ---- */
.vf-trilho {
  display: flex; gap: 9px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.vf-trilho::-webkit-scrollbar { display: none; }
.vf-prod {
  flex: 0 0 auto; width: 96px; scroll-snap-align: center;
  display: grid; gap: 5px; padding: 9px; text-align: left;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  transition: border-color .3s var(--ease), background .3s var(--ease),
              transform .45s var(--spring), box-shadow .4s var(--ease);
}
.vf-prod-foto {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--r-sm); background: var(--img-bg, var(--surface-2)); color: var(--txt-3);
}
.vf-prod-foto img { width: 100%; height: 100%; object-fit: cover; }
.vf-prod-foto svg { width: 20px; }
.vf-prod b { font-size: 11.5px; font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vf-prod small { font-size: 11px; font-weight: 750; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.vf-prod:hover { transform: translateY(-3px); border-color: var(--line-forte); }
.vf-prod:active { transform: scale(.96); }
.vf-prod.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 14px 30px -20px var(--accent-glow); }
.vf-prod.on small { color: var(--accent); }
.vf-prod.on .vf-prod-foto { box-shadow: 0 0 0 1px var(--accent) inset; }
.vf-prod--livre .vf-prod-foto { background: var(--surface-2); }
.vf-prod--livre.on .vf-prod-foto { color: var(--accent); }

/* ---- formas de pagamento ---- */
.vf-formas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vf-forma {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; gap: 6px; padding: 11px 5px 10px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 650; color: var(--txt-2);
  transition: color .3s, border-color .35s var(--ease), transform .45s var(--spring), box-shadow .4s var(--ease);
}
.vf-forma::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(150deg, var(--c1), var(--c2));
  opacity: 0; transform: scale(.7); transition: opacity .35s var(--ease), transform .5s var(--spring);
}
.vf-forma-ico {
  width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--txt-2);
  transition: background .35s var(--ease), color .3s, transform .5s var(--spring);
}
.vf-forma-ico svg { width: 17px; }
.vf-forma:hover { transform: translateY(-2px); border-color: var(--line-forte); }
.vf-forma:active { transform: scale(.95); }
.vf-forma.on { color: #fff; border-color: transparent; box-shadow: 0 16px 32px -20px var(--brilho); }
.vf-forma.on::before { opacity: 1; transform: none; }
.vf-forma.on .vf-forma-ico { background: rgba(255, 255, 255, .22); color: #fff; transform: scale(1.08) rotate(-6deg); }

/* ---- fichas de categoria ---- */
.vf-fichas {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 7px; margin: 0 -2px; scrollbar-width: none;
}
.vf-fichas::-webkit-scrollbar { display: none; }
.vf-ficha {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px 9px 11px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 650; color: var(--txt-2); white-space: nowrap;
  transition: color .3s, background .35s var(--ease), border-color .35s var(--ease), transform .4s var(--spring);
}
.vf-ficha svg { width: 16px; color: rgb(var(--cor)); transition: transform .45s var(--spring); }
.vf-ficha:hover { border-color: var(--line-forte); }
.vf-ficha:active { transform: scale(.95); }
.vf-ficha.on {
  color: rgb(var(--cor)); border-color: rgb(var(--cor));
  background: rgba(var(--cor), .13);
}
.vf-ficha.on svg { transform: scale(1.14) rotate(-8deg); }

/* ---- quando ---- */
.vf-quando { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.vf-quando .field { flex: 1 1 190px; min-width: 0; }
.vf-atalhos { display: flex; gap: 6px; }
.vf-atalho {
  padding: 11px 13px; border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 12.5px; font-weight: 650; color: var(--txt-2);
  transition: background .3s, color .3s, transform .4s var(--spring);
}
.vf-atalho:hover { color: var(--accent); }
.vf-atalho:active { transform: scale(.94); }
.vf-atalho.bateu { animation: vfBateu .5s var(--spring); }
@keyframes vfBateu {
  0% { background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }
  100% { background: var(--surface-2); transform: none; }
}

/* ---- chave de estoque ---- */
.vf-switch {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  transition: border-color .3s, background .3s;
}
.vf-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vf-sw {
  flex: 0 0 auto; width: 46px; height: 27px; border-radius: 99px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.vf-sw i {
  display: block; width: 19px; height: 19px; border-radius: 50%; background: var(--txt-3);
  transition: transform .45s var(--spring), background .35s var(--ease), width .3s var(--spring);
}
.vf-switch input:checked + .vf-sw { background: linear-gradient(145deg, var(--g-500), var(--g-700)); border-color: transparent; }
.vf-switch input:checked + .vf-sw i { transform: translateX(19px); background: var(--accent-ink); }
.vf-switch:active .vf-sw i { width: 24px; }
.vf-switch input:focus-visible + .vf-sw { box-shadow: 0 0 0 4px var(--accent-soft); }
.vf-sw-txt { display: grid; gap: 1px; }
.vf-sw-txt b { font-size: 13.5px; font-weight: 650; }
.vf-sw-txt small { font-size: 11.5px; color: var(--txt-3); }

/* ---- rodape que acompanha a rolagem ---- */
.vf-rodape {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; gap: 10px; align-items: center;
  margin: 6px -22px -22px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--glass-forte, var(--surface)); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.vf-rodape .btn-ghost { flex: 0 0 auto; padding: 13px 16px; }
.vf-rodape .btn-lg { padding: 14px 20px; }
.vf-salvar { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; }
.vf-salvar-txt { overflow: hidden; text-overflow: ellipsis; }
.vf-salvar-val {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  padding: 3px 0; border-radius: 99px; font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, .16);
  transition: max-width .45s var(--spring), opacity .3s var(--ease), padding .35s var(--ease);
}
.vf.tem-valor .vf-salvar-val { max-width: 140px; opacity: 1; padding: 3px 10px; }

/* ---------------------------------------------------------------------
   EDITAR VENDA — a ficha ja gravada
   Aqui o formulario nao comeca do zero: ele mostra o que esta no papel,
   acende o que voce mexeu e guarda o caminho de volta.
   --------------------------------------------------------------------- */

/* a ficha do registro: referencia fixa, nao muda enquanto se edita */
.ve-ficha {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line);
}
.ve-foto {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; overflow: hidden;
  display: grid; place-items: center; background: var(--surface); color: var(--txt-3);
}
.ve-foto img { width: 100%; height: 100%; object-fit: cover; }
.ve-foto svg { width: 20px; }
.ve-id { min-width: 0; display: grid; gap: 1px; }
.ve-id b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-id small { font-size: 11px; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-valor {
  margin-left: auto; flex: 0 0 auto; font-size: 14px; font-weight: 800;
  letter-spacing: -.03em; color: var(--txt-3); font-variant-numeric: tabular-nums;
}

/* a diferenca em relacao ao valor gravado */
.ve-antes {
  display: flex; align-items: center; gap: 8px; padding-top: 10px; margin-top: 2px;
  border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--txt-3);
  animation: vfSobe .4s var(--ease);
}
.ve-antes b { font-weight: 700; color: var(--txt-2); font-variant-numeric: tabular-nums; }
.ve-antes i {
  font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 2px 9px; border-radius: 99px; font-size: 11.5px;
}
.ve-antes i.sobe { color: var(--accent); background: var(--accent-soft); }
.ve-antes i.desce { color: var(--warn); background: rgba(255, 107, 107, .13); }

/* o selo que marca o campo mexido */
.vf-marca {
  display: none; margin-left: 7px; padding: 2px 8px; border-radius: 99px;
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
  animation: vfMarca .45s var(--spring);
}
.mudou > .vf-marca,
.mudou > span > .vf-marca,
.mudou > header > .vf-marca,
.mudou > label > span > .vf-marca,
.mudou .vf-money > span > .vf-marca { display: inline-block; }
@keyframes vfMarca { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* o vinculo com a vitrine */
.ve-vinculo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ve-chip {
  display: inline-flex; align-items: center; gap: 9px; min-width: 0;
  padding: 7px 14px 7px 7px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
}
.ve-chip b { font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-chip-foto {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-2); color: var(--txt-3);
}
.ve-chip-foto img { width: 100%; height: 100%; object-fit: cover; }
.ve-chip-foto svg { width: 14px; }
.ve-chip--vazio { padding: 7px 14px; color: var(--txt-3); }
.ve-chip--vazio svg { width: 15px; }
.ve-acao {
  padding: 8px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 650;
  color: var(--accent); background: var(--accent-soft);
  transition: background .3s, transform .4s var(--spring);
}
.ve-acao:active { transform: scale(.94); }
.ve-troca { display: grid; gap: 8px; animation: vfSobe .45s var(--spring); }
.ve-dica { font-size: 11.5px; color: var(--txt-3); }

/* ---- segurar para apagar ----
   Tres sinais no mesmo compasso de 1,4s: o anel se fecha em volta da
   lixeira, o vermelho varre o botao da esquerda para a direita e o icone
   treme. Tres avisos juntos sao muito mais dificeis de ignorar que um so. */
.perigo {
  position: relative; overflow: hidden; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 13px 20px; border-radius: var(--r-pill); border: 0;
  background: rgba(255, 107, 107, .1); color: var(--warn);
  font-size: 14px; font-weight: 700; cursor: pointer;
  touch-action: none; -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
  transition: background .3s var(--ease), transform .3s var(--spring);
}
.perigo:hover { background: rgba(255, 107, 107, .15); }
.perigo:focus-visible { outline: 2px solid var(--warn); outline-offset: 3px; }

/* a varredura: um ::before de largura total que cresce da esquerda */
.perigo::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 107, 107, .3);
  transform: scaleX(0); transform-origin: left center;
}
.perigo.is-segurando { background: rgba(255, 107, 107, .2); transform: scale(.98); }
.perigo.is-segurando::before { animation: varrer-perigo 1.4s linear forwards; }
@keyframes varrer-perigo { to { transform: scaleX(1); } }

/* o icone e o texto ficam ACIMA da varredura */
.perigo__disco { position: relative; width: 28px; height: 28px; display: grid; place-items: center; }
.perigo__txt { position: relative; }

.perigo__anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.perigo__trilho { fill: none; stroke: rgba(255, 107, 107, .25); stroke-width: 2.5; }
.perigo__arco {
  fill: none; stroke: var(--warn); stroke-width: 2.5; stroke-linecap: round;
  /* 2 x pi x 18 = 113.1 */
  stroke-dasharray: 113.1; stroke-dashoffset: 113.1;
  transform: rotate(-90deg); transform-origin: center;
}
/* linear, nao ease: e um cronometro, o tempo tem de passar por igual */
.perigo.is-segurando .perigo__arco { animation: encher-perigo 1.4s linear forwards; }
@keyframes encher-perigo { to { stroke-dashoffset: 0; } }

.perigo__ico { position: relative; display: grid; place-items: center; }
.perigo__ico svg { width: 15px; }
/* o tremor diz que algo esta prestes a acontecer, nao que ja aconteceu */
.perigo.is-segurando .perigo__ico { animation: tremer-perigo .34s linear infinite; }
@keyframes tremer-perigo {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-1.5px, 1px) rotate(-5deg); }
  50% { transform: translate(1.5px, -1px) rotate(5deg); }
  75% { transform: translate(-1px, -1.5px) rotate(-3deg); }
}

/* a barra de alteracoes: so existe quando ha o que desfazer */
.ve-mudancas {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px 9px 13px;
  border-radius: var(--r-pill); background: var(--accent-soft); border: 1px solid var(--accent);
  /* forwards e obrigatorio: sem ele a barra volta ao opacity 0 que ".vf > *"
     deixa nos filhos diretos e ela some depois de entrar */
  animation: vfSobe .45s var(--spring) forwards;
}
.ve-pulso {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: pulsar 2.2s var(--ease-io) infinite;
}
.ve-mudancas b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.ve-mudancas .ve-acao { background: var(--surface-2); color: var(--txt-2); }
.ve-mudancas .ve-acao:hover { color: var(--accent); }

.vf-salvar[disabled] { opacity: .45; pointer-events: none; box-shadow: none; }



/* o campo que faltou balanca em vez de so mostrar um aviso */
.sacode { animation: sacode .45s var(--ease-io); }
@keyframes sacode {
  0%, 100% { transform: none; }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

/* o cancelar guarda o texto enquanto cabe */
.vf-cancelar svg { display: none; }

@media (max-width: 430px) {
  .vf-formas { grid-template-columns: repeat(2, 1fr); }
  /* em tela estreita o botao verde precisa da largura: o cancelar vira so o X */
  .vf-cancelar svg { display: block; }
  .vf-cancelar span { display: none; }
  .vf-rodape .btn-ghost { padding: 13px 13px; }
  .vf-visor { padding: 15px 15px 14px; }
  .vf-lucro { margin-left: 0; justify-items: start; text-align: left; width: 100%; }
  .vf-custo-linha { gap: 9px; }
}

.switch-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); }
.switch-row label { font-size: 13.5px; font-weight: 600; cursor: pointer; }
.badge-soft { padding: 3px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; border: 1px solid var(--accent); }
.expediente { display: grid; gap: 8px; }
.exp-linha { display: grid; grid-template-columns: 112px auto 1fr 1fr; gap: 10px; align-items: center; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); transition: opacity .3s, border-color .3s; }
.exp-linha > b { font-size: 13px; font-weight: 600; }
.exp-linha input[type="time"] { padding: 7px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; width: 100%; }
.exp-linha.fechado { opacity: .5; }

.aviso-pub { display: flex; align-items: center; gap: 10px; padding: 14px 18px; margin-bottom: 20px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent); font-size: 14px; line-height: 1.5; animation: admEntra .4s var(--ease); }
.aviso-pub b { color: var(--accent); }
.aviso-pub.neutro { background: var(--surface); border-color: var(--line); }
.aviso-pub.neutro b { color: var(--txt); }

/* =====================================================================
   FLUTUANTES
   ===================================================================== */

.subir { position: fixed; right: 20px; bottom: 90px; z-index: 450; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-forte); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--glass-brd); color: var(--txt-2); box-shadow: var(--shadow-sm); opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .35s var(--ease), transform .45s var(--spring), color .3s; }
.subir.show { opacity: 1; transform: none; pointer-events: auto; }
.subir:hover { color: var(--accent); }
.subir svg { width: 19px; }

.toasts { position: fixed; z-index: 1200; bottom: 24px; left: 50%; transform: translateX(-50%); display: grid; gap: 9px; justify-items: center; pointer-events: none; width: max-content; max-width: 92vw; }
.toast { display: flex; align-items: center; gap: 11px; padding: 12px 20px; border-radius: var(--r-pill); background: var(--glass-forte); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid var(--glass-brd); box-shadow: var(--shadow); font-size: 14px; font-weight: 550; color: var(--txt); animation: entraToast .5s var(--spring), saiToast .4s var(--ease) 3.1s forwards; }
@keyframes entraToast { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes saiToast { to { opacity: 0; transform: translateY(-12px) scale(.95); } }
.toast .ti { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800; flex-shrink: 0; }
.toast.err .ti { background: var(--warn); color: #fff; }

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 600; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--g-700), var(--g-400)); box-shadow: 0 0 10px var(--accent-glow); transition: width .1s linear; }

/* =====================================================================
   REVEAL
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .09s; }
.reveal[data-d="2"] { transition-delay: .18s; }
.reveal[data-d="3"] { transition-delay: .27s; }
.reveal[data-d="4"] { transition-delay: .36s; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 10px; }
  /* empilhado, o nome precisa de ar antes do resto comecar */
  .hero-art { order: -1; margin-bottom: 32px; }
  .marca-loja { padding: 20px 6px; }
  .hero-scroll { display: none; }
  .rifa-banner, .rifa-top { grid-template-columns: 1fr; }
  .rifa-card { --corte: 15px; }
  .avaliacao { grid-template-columns: 1fr; gap: 22px; }
  .sobre-grid { grid-template-columns: 1fr; }
  .pm { grid-template-columns: 1fr; }
  .painel-graficos { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {

  .nav-pill { display: none; }
  .status-loja { display: none; }
  #app { padding-bottom: 110px; }
  .subir { bottom: calc(146px + env(safe-area-inset-bottom)); width: 40px; height: 40px; }
  .toasts { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .barra-comparar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .topbar-actions .menu-btn { display: none; }
  .block { margin-top: 58px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .prod-grid, .prod-grid.compacta { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  /* card compacto: foto mais baixa, um icone so e textos menores */
  .prod { border-radius: var(--r-md); }
  .prod-media { aspect-ratio: 3 / 2; }
  .prod-media .ph { font-size: 36px; }
  .prod-acoes-topo { top: 7px; right: 7px; }
  .prod-acoes-topo .prod-ico.comp, .prod-acoes-topo .prod-ico[data-share] { display: none; }
  .prod-ico { width: 32px; height: 32px; }
  .prod-ico svg { width: 16px; }
  .prod-tags { top: 7px; left: 7px; gap: 4px; }
  .prod-tags .tag { padding: 3px 8px; font-size: 9.5px; }
  .prod-body { padding: 10px 12px 12px; gap: 2px; }
  .prod-cat { font-size: 9.5px; letter-spacing: .08em; }
  .prod-name { font-size: 13.5px; line-height: 1.25; min-height: 2.5em; }
  .prod-specs { margin-top: 5px; gap: 4px; min-height: 18px; }
  .prod-specs .spec:nth-child(n+3) { display: none; }
  .spec { padding: 2px 7px; font-size: 10px; }
  .prod-price { margin-top: 7px; gap: 6px; }
  .prod-price b { font-size: 17px; }
  /* o preco antigo some no card: a etiqueta de desconto ja diz o mesmo.
     ele continua aparecendo na tela de detalhes do produto. */
  .prod-price s { display: none; }
  .prod-parc { font-size: 10.5px; }
  .prod-actions { margin-top: auto; padding-top: 9px; gap: 6px; }
  .prod-actions .btn { padding: 8px 6px; font-size: 12px; min-width: 0; }
  .prod-actions .btn.add { flex: 0 0 42px; font-size: 16px; }
  .prod-ico { width: 40px; height: 40px; }
  .glass-card { padding: 20px; }
  .filters { padding: 15px; gap: 11px; }
  .filter-row { flex-wrap: wrap; gap: 9px; }
  .filter-row .search-wrap { flex: 1 1 100%; }
  .filter-row .select { flex: 1 1 120px; }
  .filter-row .so-mobile { flex: 0 0 auto; }
  .so-mobile { display: inline-flex; }
  .filtros-mais { display: none; }
  .filtros-mais.aberto { display: grid; animation: spSobeTexto .35s var(--ease); }
  .filtros-sticky { position: static; }
  .nums-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: 270px; }
  .admin-head { align-items: flex-start; }
  .exp-linha { grid-template-columns: 86px auto 1fr 1fr; gap: 7px; padding: 8px 10px; }
  .modal { max-height: 90vh; }

  .field input, .field textarea, .select,
  .search-wrap input, .search-wrap.small input,
  input[type="text"], input[type="number"], input[type="search"],
  input[type="password"], input[type="date"], input[type="time"],
  input[type="tel"], input[type="email"], select, textarea { font-size: 16px; }
  .search-wrap.big input { font-size: 17px; }
  .exp-linha input[type="time"] { font-size: 16px; }

  .icon-btn { width: 42px; height: 42px; }
  .icon-btn svg { width: 20px; }
  .prod-ico { width: 38px; height: 38px; }
  .seg button { padding: 10px 16px; }
  .menu-chips button { padding: 10px 15px; }
  /* menu: a propria barra de navegacao se expande para cima */
  .sheet.menu .sheet-backdrop { background: rgba(0,0,0,.5); }
  .menu-panel {
    top: auto; left: 12px; right: 12px; width: auto;
    bottom: calc(84px + env(safe-area-inset-bottom));
    max-height: min(66vh, 520px);
    border-radius: 26px; border: 1px solid var(--glass-brd); border-right: 1px solid var(--glass-brd);
    transform-origin: bottom center;
    animation: menuExpande .58s var(--swift) both;
  }
  @supports (height: 100dvh) { .menu-panel { max-height: min(66dvh, 520px); } }
  .sheet.closing .menu-panel { animation: menuRecolhe .34s var(--ease) forwards; }
  .menu-grab { display: none; }
  .menu-topo { padding: 16px 18px 13px; }
  .menu-scroll > * { transform: translateY(14px); animation-name: menuItemY; }

  /* painel no celular: barra flutuante embaixo, igual a do cliente */
  .adm-shell { grid-template-columns: 1fr; }
  .adm-side { display: none; }
  .adm-cabecalho { position: static; padding: 18px 16px 14px; }
  .adm-painel { padding: 18px 16px calc(112px + env(safe-area-inset-bottom)); }
  .adm-valor { font-size: 14px; }

  .adm-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
    padding: 0 12px calc(10px + env(safe-area-inset-bottom)); justify-content: center; }
  .adm-tabbar .tabbar-inner > button:not(.tab-centro) {
    position: relative; z-index: 2; flex: 1; display: grid; justify-items: center; gap: 3px;
    padding: 6px 2px; color: var(--txt-3); transition: color .35s var(--ease), transform .35s var(--spring); }
  .adm-tabbar .tabbar-inner svg { width: 21px; }
  .adm-tabbar .tabbar-inner span { font-size: 10px; font-weight: 600; }
  .adm-tabbar .tabbar-inner > button.on { color: var(--accent); }
  .adm-tabbar .tabbar-inner > button.on svg { animation: pulaTab .5s var(--spring); }
  .adm-tabbar .tabbar-inner > button:active { transform: scale(.9); }
  .adm-tabbar.aberto { z-index: 960; }
  .adm-tabbar.aberto .tc-circ { transform: translateY(-20px) rotate(90deg); }
  .adm-tabbar.aberto .tc-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .adm-tabbar.aberto .tc-burger i:nth-child(2) { opacity: 0; }
  .adm-tabbar.aberto .tc-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  #sheetAdmMenu .menu-panel { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* a altura minima e o aspect-ratio brigam: o segundo recalcularia a largura
     (42 x 1.45 = 61px) e os botoes transbordariam a coluna, se sobrepondo. */
  .num { min-height: 42px; aspect-ratio: auto; }
  .qty button { width: 30px; height: 30px; }
  .ci-del { width: 38px; height: 38px; }
  .adm-actions .icon-btn { width: 40px; height: 40px; }
  .link-arrow { padding: 8px 0; }
  .faq summary { padding: 7px 0; }
  .mlink { padding: 13px 12px; }
}
@supports (height: 100dvh) { @media (max-width: 860px) { .modal { max-height: 90dvh; } } }

/* ---------------------------------------------------------------------
   CELULAR: o site e usado quase so no telefone.
   O aparelho 3D ocupava a tela inteira e empurrava titulo e botao para
   fora do primeiro quadro; aqui ele encolhe para o conteudo aparecer.
   --------------------------------------------------------------------- */
@media (max-width: 680px) {
  .hero { min-height: 0; padding: 10px 0 6px; gap: 6px; }
  .hero-art { margin-bottom: 30px; }
  /* em telefone o nome divide o primeiro quadro com o titulo e os
     botoes: ele encolhe para caberem todos */
  .marca-loja { padding: 10px 4px 6px; }
  .mv-nome { font-size: clamp(38px, 14vw, 58px); }
  .mv-luzes { filter: blur(34px); }
  .hero-inner { gap: 13px; }
  .hero-title { font-size: clamp(29px, 8.4vw, 38px); line-height: 1.08; }
  .hero-sub { font-size: 14px; }

  /* botao de verdade em telefone: largo, alto e facil de acertar */
  .hero-cta { width: 100%; gap: 9px; margin-top: 2px; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .hero-stats { width: 100%; justify-content: space-between; gap: 10px; margin-top: 12px; }
  .hero-stats div { flex: 1; }
  .hero-stats span { font-size: 11px; line-height: 1.25; }

  /* o botao de voltar ao topo cobria o canto dos cards */
  .subir { right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 38px; height: 38px; }
  .subir svg { width: 17px; }

  /* no telefone o filtro de periodo fica sozinho na linha */
  .dash-filtro { flex-direction: column; align-items: stretch; gap: 10px; }

  /* cartao de rifa: o anel desce e as acoes viram grade */
  .rcard { padding: 15px; gap: 12px; }
  .rc-topo { grid-template-columns: auto 1fr; grid-template-areas: "premio titulo" "anel anel"; }
  .rc-premio { grid-area: premio; width: 54px; height: 54px; border-radius: 16px; }
  .rc-tit { grid-area: titulo; }
  .rc-anel { grid-area: anel; justify-self: center; }
  .rc-stats { grid-template-columns: 1fr 1fr; gap: 7px; }
  .rc-st { padding: 9px 10px; }
  .rc-acoes { display: grid; grid-template-columns: 1fr 1fr; }
  .rc-acoes .btn { width: 100%; justify-content: center; }
  .rc-acoes .btn.danger { grid-column: 1 / -1; }
  .rc-mapa { grid-template-columns: repeat(auto-fill, minmax(8px, 1fr)); gap: 2.5px; padding: 9px; }

  /* dois cartoes por linha, como nos painéis de venda */
  .met-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .met { padding: 13px 13px 14px; }
  .met header { gap: 7px; margin-bottom: 3px; }
  .met-ico { width: 27px; height: 27px; border-radius: 8px; }
  .met-ico svg { width: 15px; }
  .met-rot { font-size: 11px; }
  .met > b { font-size: 19px; }
  .met > small { font-size: 10.5px; }
  /* o selo de variação não cabe ao lado do rótulo: vai para baixo do valor */
  .met header .delta { position: absolute; right: 12px; bottom: 13px; }
  .met > small { padding-right: 56px; }
  .dash-nova { width: 100%; justify-content: center; }
  .dh-topo { flex-direction: column; align-items: stretch; gap: 13px; }
  .dh-abas { width: 100%; }
  .dh-abas button { flex: 1; text-align: center; padding: 9px 6px; }
  .dg-svg { height: 150px; }
  /* no telefone o nome ganha a linha inteira; selo e acoes descem */
  .mov li {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ico corpo valor" "selo selo acoes";
    row-gap: 9px; column-gap: 11px; padding: 12px 10px;
  }
  .mov-selo { justify-self: start; }
  .mov-acoes { justify-self: end; }
  .mov li:not(:last-child) { border-bottom: 1px solid var(--line); border-radius: 0; }
  .mov-filtros .seg-sub { width: 100%; }
  /* as pílulas de filtro ficavam com 33px de altura de toque */
  .seg button, .mov-filtros .seg-sub button { padding-top: 10px; padding-bottom: 10px; }

  /* catálogo: dois produtos por linha no telefone */
  .cat-toolbar { flex-direction: column; align-items: stretch; gap: 9px; }
  .cat-toolbar .search-wrap { max-width: none; }
  .cat-toolbar .dash-nova { width: 100%; justify-content: center; }
  .cat-linha { gap: 8px; }
  .agrupar { padding: 10px 12px; }
  .agrupar span { display: none; }
  .pgrade { grid-template-columns: 1fr 1fr; gap: 9px; }
  .gaveta__puxar { padding: 12px 13px; gap: 11px; }
  .gaveta__ico { width: 37px; height: 37px; border-radius: 12px; }
  .trilho.trilho--gaveta { padding-inline: 13px; scroll-padding-inline: 13px; gap: 9px; }
  .trilho.trilho--gaveta > .pcard { width: 152px; }
  .gaveta__dentro { padding-bottom: 13px; }
  .pc-corpo { padding: 10px 11px 12px; padding-right: 42px; }
  .pc-nome { font-size: 12.5px; }
  .pc-preco { font-size: 15px; }

  /* em 320px "TICKET MÉDIO" encostava no rótulo vizinho */
  .dh-pes { gap: 12px; }
  .dh-pes small { font-size: 9.5px; letter-spacing: .05em; white-space: normal; line-height: 1.25; }
  .dh-pes b { font-size: 14px; }

  /* os passos e as garantias nao cabem lado a lado no telefone */
  .comprar-aqui { grid-template-columns: 1fr; gap: 16px; }
  .garantias { grid-template-columns: 1fr 1fr; gap: 8px; }
  .garantias li { padding: 11px 12px; gap: 10px; }
  .ga-ico { width: 30px; height: 30px; border-radius: 10px; }
  .garantias b { font-size: 12.5px; }
  .garantias small { font-size: 11px; }
  .loja-agora { padding: 22px; gap: 18px; }
  .la-acoes { width: 100%; display: grid; gap: 9px; }
  .la-acoes .btn { width: 100%; }

  /* respiro entre blocos sem desperdicar altura de tela */
  .block { margin-top: 42px; }
  .block-head { margin-bottom: 16px; }

  /* ---- area de toque: nada abaixo de 44px de altura ---- */
  .link-arrow { padding: 11px 0; }

  /* a barrinha do slider tinha 5px de alvo; agora o dedo pega 34px
     e a trilha continua fina, desenhada dentro do proprio campo */
  input[type="range"] { height: 44px; background: none; }
  input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: var(--surface-2); }
  input[type="range"]::-webkit-slider-thumb { margin-top: -7.5px; }
  input[type="range"]::-moz-range-track { height: 5px; border-radius: 99px; background: var(--surface-2); }

  /* WhatsApp / Instagram eram so texto de 17px de altura */
  .info-card p a { display: inline-block; padding: 11px 2px; }
  .info-actions { display: grid; gap: 9px; }
  .info-actions .btn { width: 100%; }
  .aval-form .btn, .avaliacao .btn { width: 100%; }
}

@media (max-width: 520px) {
  .adm-row { flex-wrap: wrap; row-gap: 10px; gap: 11px; padding: 12px; }
  .adm-thumb { width: 46px; height: 46px; }
  .adm-main { flex: 1 1 60%; min-width: 0; }
  .adm-main b, .adm-main small { overflow-wrap: anywhere; }
  .adm-actions { flex: 1 1 100%; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--line); }
  .adm-toolbar { gap: 10px; }
  .adm-toolbar .search-wrap { max-width: none; }
  .adm-toolbar .btn { width: 100%; }
  .bc-acoes { width: 100%; }
  .bc-acoes .btn { flex: 1; }
}

@media (max-width: 430px) {
  .pag-anel { max-width: 272px; }

  /* a frase do carregamento cabe em uma linha, com as estrelas coladas nela */
  .sp-tag { max-width: none; width: fit-content; font-size: 9px; letter-spacing: .12em; gap: 9px; }
  .sp-tag .sp-star { width: 11px; }
  #app { --recuo: 15px; }
  .topbar { padding-inline: 12px; }
  .prod-grid { gap: 10px; }
  .prod-media .ph { font-size: 44px; }
  .sp-word { gap: 9px; }
  .sp-core { width: 162px; height: 162px; }
  .sp-orbita i { transform: rotate(var(--a)) translateY(-92px) rotate(calc(-1 * var(--a))); animation-name: spContraGira2; }
  @keyframes spContraGira2 { to { transform: rotate(var(--a)) translateY(-92px) rotate(calc(-1 * var(--a) - 360deg)); } }
  .sp-phone { width: 64px; }
  .nums-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
  .cd-box { min-width: 50px; }
  .cd-box b { font-size: 19px; }
  .hero-stats { gap: 18px; }
  .hero-stats strong { font-size: 21px; }
  .admin-head-actions .btn { flex: 1; }
  .exp-linha { grid-template-columns: 1fr auto; row-gap: 8px; }
}

@media (hover: none) {
  .prod:hover, .cat:hover, .trust:hover, .serv:hover, .passo:hover, .adm-row:hover,
  .mbtn:hover, .mcat:hover, .mlink:hover, .ma:hover, .mcard:hover, .btn:hover,
  .num:hover:not(.sold), .rifa-prize-img:hover, .pm-thumbs button:hover,
  .brand:hover, .prod-ico:hover, .adm-nav button:hover { transform: none; }
  .prod:hover { box-shadow: var(--shadow-sm); border-color: var(--glass-brd); }
  .prod:hover .prod-media img { transform: none; }
  .prod:hover .prod-media::after { opacity: 0; }
  .mbtn:hover, .mcat:hover { border-color: var(--line); background: var(--surface); }
  .cat:hover { border-color: var(--line); box-shadow: none; }
  .cat:hover::before { opacity: 0; }
  .cat:hover .cat-ico { transform: none; }
  .trust:hover, .serv:hover, .passo:hover { border-color: var(--line); box-shadow: none; }
  .btn-ghost:hover { background: var(--surface); border-color: var(--glass-brd); color: var(--txt); }
  .btn-primary:hover { box-shadow: 0 14px 34px -14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3); }
  .icon-btn:hover { background: none; color: var(--txt-2); }
  .menu-chips button:hover { border-color: var(--line); color: var(--txt-2); }
  .mbtn:hover .mb-ico, .mcat:hover .mcat-ico { transform: none; }
  .num:hover:not(.sold) { border-color: var(--line); color: var(--txt-2); }
  .link-arrow:hover svg { transform: none; }
  .prod:active, .cat:active, .serv:active, .trust:active, .passo:active { transform: scale(.985); }
  .mbtn:active { transform: scale(.95); border-color: var(--accent); }
  .mcat:active { background: var(--surface-2); }
  .mlink:active { background: var(--surface-2); }

  /* no toque o hover gruda: o card so reage de verdade no :active */
  .seccard:hover { transform: none; border-color: var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; }
  .seccard:hover .sc-ico { transform: none; background: var(--surface-2); }
  .seccard:hover .sc-ico::after { opacity: 0; }
  .seccard:hover .sc-luz { opacity: 0; }
  .seccard:hover .sc-seta { opacity: .45; color: var(--txt-3); transform: none; }
  .seccard.on:hover { border-color: var(--accent); background: var(--accent-soft); }
  .seccard.on:hover .sc-ico { background: linear-gradient(145deg, var(--g-500), var(--g-700)); color: var(--accent-ink); }
  .seccard.on:hover .sc-luz { opacity: 1; }
  .seccard:active { transform: scale(.96); border-color: var(--accent); }
  .seccard:active .sc-ico { transform: scale(1.1); background: var(--accent-soft); }
  .seccard:active .sc-luz { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }  /* a gaveta abrir e funcao, nao enfeite: so o percurso para */
  .gaveta__dentro .pcard { animation: none; }
  .trilho { scroll-snap-type: none; }
}

@media print {
  .topbar, .tabbar, .subir, .bg-fx, .splash, .scroll-progress, .barra-comparar, .spotlight { display: none !important; }
}

/* O cronometro do "segure para apagar" E a confirmacao: com a regra global de
   movimento reduzido ele fecharia em um centesimo de segundo e o primeiro
   toque apagaria a venda, sem tempo de soltar. A duracao volta na marra. */
@media (prefers-reduced-motion: reduce) {
  .perigo__ico { animation: none !important; }
  .perigo.is-segurando .perigo__arco,
  .perigo.is-segurando::before { animation-duration: 1.4s !important; }
}

/* a gaveta das categorias dentro do menu: mesma peca da pagina inicial,
   so que guardando a lista de categorias em vez de um trilho de produtos */
#menuCatGaveta .gaveta { margin: 0; }
#menuCatGaveta .gaveta__dentro { padding: 12px 0 0; }

/* fileira de categorias: a mesma ideia das gavetas da home, em miniatura */
/* a folga de baixo e a mesma dos lados: coladas na borda da
   gaveta as fichas pareciam cortadas */
.cat-fila { display: flex; gap: 8px; padding: 2px 2px 14px; margin: 0 -2px; }
.catm {
  position: relative; overflow: hidden; flex: 0 0 auto; width: 92px;
  display: grid; justify-items: center; gap: 3px; padding: 11px 7px 10px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  text-align: center;
  opacity: 0; animation: catmEntra .5s var(--spring) forwards;
  animation-delay: calc(var(--i, 0) * .045s);
  transition: border-color .3s var(--ease), background .3s var(--ease),
              transform .4s var(--spring), box-shadow .4s var(--ease);
}
@keyframes catmEntra { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
.catm-ico {
  width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(var(--cor), .12); color: rgb(var(--cor));
  transition: transform .45s var(--spring), background .35s var(--ease);
}
.catm-ico svg { width: 17px; stroke-width: 1.9; }
.catm b { font-size: 11px; font-weight: 650; line-height: 1.2; }
.catm i { font-style: normal; font-size: 9.5px; color: var(--txt-3); }
.catm:hover {
  transform: translateY(-3px); border-color: rgb(var(--cor));
  box-shadow: 0 14px 26px -18px rgba(var(--cor), .6);
}
.catm:hover .catm-ico { transform: scale(1.1) rotate(-7deg); background: rgba(var(--cor), .22); }
.catm:active { transform: scale(.95); }

/* =====================================================================
   VITRINE
   A capa respira, as categorias correm em pilulas com a cor de cada uma,
   os filtros moram numa gaveta e a grade e um mosaico: o destaque ocupa o
   dobro. Cada cartao tem uma luz que segue o ponteiro.
   ===================================================================== */

/* ---- capa ---- */
.vt-capa {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 16px; padding: 34px 24px 26px; margin-bottom: 18px;
  border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line);
  animation: dashSobe .7s var(--spring) both;
}
.vt-aurora {
  position: absolute; inset: -60% 20% 20% -30%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(45% 45% at 30% 40%, var(--accent-soft), transparent 70%),
    radial-gradient(40% 40% at 75% 20%, rgba(106, 165, 255, .14), transparent 70%);
  animation: vtAurora 16s var(--ease-io) infinite;
}
@keyframes vtAurora {
  0%, 100% { transform: none; opacity: .9; }
  50% { transform: translate(26px, 16px) scale(1.18); opacity: 1; }
}
/* malha fina de fundo, para a capa nao ficar lisa demais */
.vt-malha {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%);
}
.vt-capa-txt { display: grid; gap: 5px; }
.vt-eyebrow {
  font-family: var(--font-titulo); font-size: 10.5px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.vt-capa h1 {
  font-family: var(--font-titulo); font-size: clamp(30px, 8vw, 46px);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.02;
}
.vt-capa p { font-size: 13px; color: var(--txt-3); font-variant-numeric: tabular-nums; }

/* ---- busca ---- */
.vt-busca {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease), transform .4s var(--spring);
}
.vt-busca svg { width: 19px; color: var(--txt-3); flex-shrink: 0; transition: color .3s, transform .45s var(--spring); }
.vt-busca input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--txt);
  font-size: 15px; font-weight: 550;
}
.vt-busca input:focus { outline: none; }
.vt-busca input::-webkit-search-cancel-button { display: none; }
.vt-busca:focus-within {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 18px 34px -24px var(--accent-glow);
}
.vt-busca:focus-within svg { color: var(--accent); transform: scale(1.08) rotate(-8deg); }
.vt-busca-limpar {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--txt-3); transition: color .3s, transform .4s var(--spring);
}
.vt-busca-limpar svg { width: 13px; }
.vt-busca-limpar:hover { color: var(--warn); transform: rotate(90deg); }

/* ---- categorias em pilulas ---- */
.vt-cats { display: flex; gap: 8px; padding: 2px 2px 10px; margin: 0 -2px 4px; }
.vt-cat {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; font-weight: 650; color: var(--txt-2); white-space: nowrap;
  transition: color .3s, background .35s var(--ease), border-color .35s var(--ease),
              transform .4s var(--spring), box-shadow .4s var(--ease);
}
.vt-cat svg { width: 17px; color: rgb(var(--cor, 0, 229, 122)); transition: transform .45s var(--spring); }
.vt-cat:hover { transform: translateY(-2px); border-color: rgb(var(--cor, 0, 229, 122)); }
.vt-cat:active { transform: scale(.95); }
.vt-cat.on {
  color: rgb(var(--cor, 0, 229, 122)); border-color: rgb(var(--cor, 0, 229, 122));
  background: rgba(var(--cor, 0, 229, 122), .12);
  box-shadow: 0 10px 24px -16px rgba(var(--cor, 0, 229, 122), .8);
}
.vt-cat.on svg { transform: scale(1.14) rotate(-8deg); }

/* ---- barra de ferramentas ---- */
/* sem ancoragem: quando a barra cresce, o navegador tentava compensar
   mexendo na rolagem, e a grade dava um pulo embaixo da caixa */
#view-vitrine { overflow-anchor: none; }
.vt-barra { position: sticky; top: 10px; z-index: 60; margin-bottom: 20px; }

/* A barra nao abre outro cartao: ela mesma se estica. Os dois botoes ficam
   na primeira linha da grade e os vaos na segunda, ocupando a largura toda.
   A moldura de degrade e um pseudo-elemento mascarado, senao o vidro de
   dentro apagaria a cor. */
.vt-caixa {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  padding: 7px; border-radius: 30px;
  background: var(--glass-forte); border: 1px solid transparent;
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-radius .4s var(--ease);
}
/* aberta, a barra fica quase solida: o texto dos produtos atras disputava
   a leitura com o dos filtros */
.vt-caixa.aberta {
  background: var(--vt-solido); border-radius: 26px;
  box-shadow: 0 28px 56px -30px rgba(0, 0, 0, .85), inset 0 1px 0 var(--glass-hl);
}
.vt-caixa::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, var(--glass-brd), rgba(0, 229, 122, .5), var(--glass-brd));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* display: contents deixa o botao e o vao serem itens da grade da barra */
.vt-g { display: contents; }
#gOrdem .gaveta__puxar { grid-column: 1; grid-row: 1; }
#gFiltros .gaveta__puxar { grid-column: 2; grid-row: 1; }
.vt-caixa .gaveta__vao { grid-column: 1 / -1; grid-row: 2; overflow: hidden; }
.vt-caixa .gaveta__dentro { display: grid; gap: 14px; padding: 15px 8px 7px; }

/* ---- o botao de ordenar ---- */
.vt-ordem {
  position: relative; min-width: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 1px 10px; padding: 6px 10px 6px 13px; border-radius: var(--r-pill); text-align: left;
  transition: background .3s var(--ease);
}
.vt-ordem:hover { background: var(--surface); }
.vt-ordem-ico { grid-row: 1 / 3; width: 18px; color: var(--accent); }
.vt-ordem-txt { grid-column: 2; grid-row: 1 / 3; min-width: 0; display: grid; gap: 1px; }
.vt-ordem-txt i {
  font-style: normal; font-size: 9px; font-weight: 750; letter-spacing: .15em;
  text-transform: uppercase; color: var(--txt-3);
}
.vt-ordem-txt b {
  font-family: var(--font-titulo); font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vt-seta { grid-row: 1 / 3; display: grid; place-items: center; color: var(--accent); }
.vt-seta svg { width: 15px; transition: transform .45s var(--spring); }
.gaveta.aberta .vt-seta svg { transform: rotate(180deg); }

/* ---- o botao de filtros ---- */
.vt-mais {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px 10px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; font-weight: 650; color: var(--txt-2);
  transition: color .3s, background .3s, border-color .3s, transform .35s var(--spring);
}
.vt-mais > svg { width: 16px; }
.vt-mais i {
  font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 800;
}
.vt-mais:hover { color: var(--txt); border-color: var(--line-forte); }
.vt-mais:active { transform: scale(.95); }
#gFiltros.aberta .vt-mais { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---- as opcoes de ordem ---- */
.vt-ops { display: grid; gap: 6px; }
.vt-op {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-sm); text-align: left;
  background: var(--surface); border: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .35s var(--spring);
}
.vt-op-ico {
  width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--txt-3);
  transition: background .35s var(--ease), color .3s var(--ease), transform .45s var(--spring);
}
.vt-op-ico svg { width: 16px; stroke-width: 1.9; }
.vt-op-txt { min-width: 0; display: grid; gap: 1px; }
.vt-op-txt b { font-size: 13px; font-weight: 650; }
.vt-op-txt small { font-size: 10.5px; color: var(--txt-3); }
.vt-op-ok {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  transform: scale(0); transition: transform .45s var(--spring);
}
.vt-op-ok svg { width: 13px; stroke-width: 2.8; }
.vt-op:hover { background: var(--surface-2); }
.vt-op:active { transform: scale(.98); }
.vt-op.on { border-color: var(--accent); background: var(--accent-soft); }
.vt-op.on .vt-op-ico { background: var(--accent); color: var(--accent-ink); transform: scale(1.06) rotate(-6deg); }
.vt-op.on .vt-op-txt b { color: var(--accent); }
.vt-op.on .vt-op-ok { transform: scale(1); }

/* ---- o miolo dos filtros ---- */
.vt-bloco { display: grid; gap: 9px; }
.vt-bloco-tit {
  font-size: 10px; font-weight: 750; letter-spacing: .15em;
  text-transform: uppercase; color: var(--txt-3);
}
.vt-bloco-tit b { color: var(--accent); letter-spacing: 0; text-transform: none; font-size: 12px; }
.vt-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- condicao: duas colunas de fichas, cada uma com a sua cor ---- */
.vt-conds { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.vt-cond {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 10px 12px; border-radius: var(--r-sm); text-align: left;
  background: var(--surface); border: 1px solid transparent;
  font-size: 12.5px; font-weight: 650; color: var(--txt-2);
  transition: color .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), transform .35s var(--spring);
}
.vt-cond-pt {
  flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
  transition: transform .45s var(--spring), box-shadow .4s var(--ease);
}
.vt-cond-pt.todas { background: var(--txt-3); }
.vt-cond-pt.novo { background: var(--accent); }
.vt-cond-pt.semi { background: rgba(80, 170, 255, .95); }
.vt-cond-pt.usado { background: rgba(255, 190, 70, .95); }
.vt-cond:hover { background: var(--surface-2); color: var(--txt); }
.vt-cond:active { transform: scale(.97); }
.vt-cond.on { color: var(--txt); background: var(--surface-2); border-color: var(--accent); }
.vt-cond.on .vt-cond-pt { transform: scale(1.5); box-shadow: 0 0 10px -1px currentColor; }
.vt-bloco input[type="range"] { width: 100%; }

.vt-check {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: var(--r-sm); background: var(--surface); cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--txt-2);
  transition: background .3s var(--ease);
}
.vt-check:hover { background: var(--surface-2); }
.vt-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.vt-check-caixa {
  position: relative; flex-shrink: 0; width: 20px; height: 20px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.vt-check-caixa::after {
  content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 10px;
  border-right: 2.4px solid var(--accent-ink); border-bottom: 2.4px solid var(--accent-ink);
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform .4s var(--spring);
}
.vt-check input:checked + .vt-check-caixa {
  background: linear-gradient(145deg, var(--g-500), var(--g-700)); border-color: transparent;
}
.vt-check input:checked + .vt-check-caixa::after { transform: rotate(45deg) scale(1); }
.vt-check input:focus-visible + .vt-check-caixa { box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---- filtros ativos, dentro da propria gaveta ---- */
.vt-ativos {
  display: grid; gap: 8px; padding-top: 13px; margin-top: 2px;
  border-top: 1px dashed var(--line);
  animation: vtAtivos .4s var(--ease);
}
@keyframes vtAtivos { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vt-ativos-tit {
  font-size: 10px; font-weight: 750; letter-spacing: .15em;
  text-transform: uppercase; color: var(--txt-3);
}
.vt-ativos-fila { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 5px 5px 5px 12px; border-radius: var(--r-pill);
  background: var(--accent-soft); border: 1px solid var(--accent);
  font-size: 11.5px; font-weight: 650; color: var(--accent);
  animation: vtChip .45s var(--spring) both;
}
@keyframes vtChip { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
.vt-chip button {
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); transition: background .3s var(--ease), transform .4s var(--spring);
}
.vt-chip button svg { width: 11px; stroke-width: 2.6; }
.vt-chip button:hover { background: var(--accent); color: var(--accent-ink); transform: rotate(90deg); }
.vt-chip-limpar {
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--surface-2); font-size: 11.5px; font-weight: 650; color: var(--txt-3);
  transition: color .3s, background .3s, transform .35s var(--spring);
}
.vt-chip-limpar:hover { color: var(--warn); background: rgba(255, 107, 107, .12); }
.vt-chip-limpar:active { transform: scale(.94); }

/* ---- a grade: mosaico ---- */
.vt-grade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.vt-card {
  position: relative; isolation: isolate; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  opacity: 0; transform: translateY(20px);
  animation: vtEntra .65s var(--spring) forwards;
  animation-delay: calc(var(--i, 0) * .055s);
  transition: border-color .4s var(--ease), transform .5s var(--spring), box-shadow .45s var(--ease);
}
@keyframes vtEntra { to { opacity: 1; transform: none; } }
/* o destaque ocupa a largura inteira e vira cartao deitado */
.vt-card.grande { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.vt-card.grande .vt-foto { flex: 0 0 44%; aspect-ratio: auto; }
.vt-card.grande .vt-corpo { flex: 1; justify-content: center; }
.vt-card.grande h3 { font-size: 17px; min-height: 0; }
.vt-card.grande .vt-corpo { padding: 16px 18px; gap: 5px; }
.vt-card.grande .vt-marca { font-size: 10.5px; }
.vt-card.grande .vt-specs { height: auto; flex-wrap: wrap; }
.vt-card.grande .vt-specs span { font-size: 10.5px; padding: 3px 8px; }
.vt-card.grande .vt-preco { flex-wrap: wrap; }
.vt-card.grande .vt-preco b { font-size: 22px; }
.vt-card.grande .vt-preco s { font-size: 12.5px; }
.vt-card.grande .vt-parc { margin-top: 2px; font-size: 11.5px; }

/* a luz que segue o ponteiro */
.vt-luz {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(260px 260px at var(--mx, 50%) var(--my, 0%),
              rgba(var(--cor, 0, 229, 122), .16), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.vt-card:hover { transform: translateY(-5px); border-color: rgb(var(--cor, 0, 229, 122)); box-shadow: 0 28px 54px -34px rgba(var(--cor, 0, 229, 122), .75); }
.vt-card:hover .vt-luz { opacity: 1; }

.vt-foto {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1;
  display: grid; place-items: center; background: var(--img-bg, var(--surface-2));
}
.vt-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.vt-card:hover .vt-foto img { transform: scale(1.07); }
.vt-foto .ph { font-size: 44px; opacity: .55; transition: transform .7s var(--spring); }
.vt-card:hover .vt-foto .ph { transform: scale(1.12) rotate(-5deg); }
/* o brilho varre a foto uma vez quando o cartao entra */
.vt-brilho {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .13) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: vtVarre 1.2s var(--ease-io) forwards;
  animation-delay: calc(.4s + var(--i, 0) * .055s);
}
html[data-theme="light"] .vt-brilho { background: linear-gradient(105deg, transparent 40%, rgba(0,0,0,.06) 50%, transparent 60%); }
@keyframes vtVarre { to { transform: translateX(120%); } }

.vt-tags { position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; gap: 5px; justify-items: start; }
.vt-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-forte); border: 1px solid var(--glass-brd); color: var(--txt-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: color .3s, transform .45s var(--spring), background .3s;
}
.vt-fav svg { width: 17px; transition: transform .4s var(--spring); }
.vt-fav:hover { color: var(--warn); transform: scale(1.1); }
.vt-fav.on { color: var(--warn); }
.vt-fav.on svg { fill: currentColor; transform: scale(1.1); }

/* o corpo e uma coluna e o pe desce sozinho: assim os botoes de todos os
   cartoes da mesma fileira ficam na mesma altura */
.vt-corpo { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 11px; }
/* o rotulo de categoria dentro do cartao nao e a pilula do filtro */
.vt-marca {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  color: rgb(var(--cor, 0, 229, 122));
}
.vt-marca svg { width: 12px; stroke-width: 2; }
/* nome comprido quebra em duas linhas em vez de furar o cartao */
.vt-corpo h3 {
  font-family: var(--font-titulo); font-size: 13px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.22; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.44em;   /* duas linhas reservadas */
}
/* uma linha so de etiquetas: o que nao couber fica de fora */
.vt-specs { display: flex; gap: 4px; margin-top: 1px; height: 18px; overflow: hidden; }
.vt-specs span {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 6px; background: var(--surface-2);
  font-size: 9.5px; font-weight: 600; color: var(--txt-3); white-space: nowrap;
}
/* preco e preco antigo na mesma linha, sempre: quebrar deixava um cartao
   com uma linha a mais que o outro e empurrava as parcelas para baixo */
.vt-preco { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; flex-wrap: nowrap; }
.vt-preco b { flex: 0 0 auto; font-size: 15px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.vt-preco s {
  min-width: 0; font-size: 9.5px; color: var(--txt-3); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* a ultima linha desce para o pe: assim os cartoes da fileira terminam juntos */
/* sempre numa linha: "a vista no Pix ou dinheiro" quebrava em dois e
   deixava uma fileira mais alta que a outra */
.vt-parc { margin-top: auto; padding-top: 3px; font-size: 10px; color: var(--accent); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-card.grande .vt-parc { white-space: normal; }

/* o mais flutua no canto da foto: na coluna estreita ele nao cabia ao lado
   do botao sem furar o cartao */
.vt-add {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  overflow: hidden; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glass-forte); border: 1px solid var(--glass-brd); color: var(--accent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(6px); opacity: 0;
  transition: background .3s var(--ease), transform .45s var(--spring), opacity .3s var(--ease);
}
.vt-card:hover .vt-add, .vt-add:focus-visible { transform: none; opacity: 1; }
@media (hover: none) { .vt-add { transform: none; opacity: 1; } }
.vt-add svg { width: 18px; transition: transform .45s var(--spring), opacity .25s; }
.vt-add::after {
  content: ""; position: absolute; width: 13px; height: 7px;
  border-left: 2.4px solid var(--accent-ink); border-bottom: 2.4px solid var(--accent-ink);
  transform: rotate(-45deg) scale(0); transition: transform .4s var(--spring);
}
.vt-add:hover { background: var(--accent-soft); }
.vt-add:active { transform: scale(.9); }
.vt-card:hover .vt-add:active { transform: scale(.9); }
.vt-add.feito { background: var(--accent); }
.vt-add.feito svg { transform: scale(0) rotate(90deg); opacity: 0; }
.vt-add.feito::after { transform: rotate(-45deg) scale(1); }

/* ---- nada encontrado ---- */
.vt-vazio {
  display: grid; justify-items: center; gap: 7px; text-align: center;
  padding: 60px 20px; animation: dashSobe .6s var(--spring) both;
}
.vt-vazio-ico {
  width: 72px; height: 72px; border-radius: 26px; display: grid; place-items: center;
  margin-bottom: 8px; background: var(--surface-2); color: var(--txt-3);
  animation: mvFlutua 4.5s var(--ease-io) infinite;
}
.vt-vazio-ico svg { width: 30px; }
.vt-vazio h3 { font-family: var(--font-titulo); font-size: 19px; letter-spacing: -.02em; }
.vt-vazio p { font-size: 13.5px; color: var(--txt-3); max-width: 34ch; line-height: 1.6; }
.vt-vazio .btn { margin-top: 10px; }

@media (min-width: 700px) {
  .vt-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-card.grande { grid-column: span 2; }
  .vt-capa { grid-template-columns: 1fr auto; align-items: end; padding: 44px 34px 34px; }
  .vt-busca { width: min(360px, 42vw); }
}
@media (min-width: 1000px) {
  .vt-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .vt-capa { padding: 26px 18px 20px; }
  .vt-card.grande { flex-direction: column; }
  .vt-card.grande .vt-foto { flex: none; aspect-ratio: 16 / 9; }
}

/* a barra de ferramentas ganha relevo quando gruda no alto */
.vt-barra.grudada .vt-caixa {
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .8), inset 0 1px 0 var(--glass-hl);
  transform: scale(.985);
}
html[data-theme="light"] .vt-barra.grudada .vt-caixa { box-shadow: 0 20px 40px -28px rgba(6, 40, 25, .3); }