/* Nexus PDV — landing page
   Tokens tirados do tema escuro do sistema (pdv-frontend/src/styles/global.css),
   com um fundo mais profundo para o ar tecnológico. */

:root {
  --bg:        #060A14;
  --bg-2:      #0B1222;
  --surface:   #111A2E;
  --surface-2: #162032;
  --border:    rgba(148, 163, 184, .14);
  --border-2:  rgba(148, 163, 184, .26);

  --text:   #F1F5F9;
  --text-2: #A3B1C6;
  --text-3: #8391A7;

  --primary:   #3B82F6;
  --primary-2: #2563EB;
  --indigo:    #6366F1;
  --cyan:      #22D3EE;
  --success:   #22C55E;
  --warning:   #F59E0B;
  --danger:    #EF4444;

  --grad: linear-gradient(100deg, #60A5FA 0%, #818CF8 45%, #22D3EE 100%);
  --radius: 14px;
  --wrap: 1200px;
  --nav-h: 68px;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Brilhos decorativos (ex.: 900px atrás dos planos) não podem alargar a página:
   no celular isso deixava arrastar a tela para o lado. clip corta sem virar área
   de rolagem, então o "position: sticky" do computador continua funcionando. */
main, .foot { overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.ic {
  width: 1.15em; height: 1.15em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 820px; }

em { font-style: normal; }
h1 em, h2 em, h3 em, blockquote em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-right: .06em;
}

/* ───────── botões ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  height: 46px; padding: 0 1.25rem; border-radius: 11px;
  font-weight: 600; font-size: .95rem; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.btn--sm { height: 38px; padding: 0 1rem; font-size: .875rem; border-radius: 9px; }
.btn--lg { height: 54px; padding: 0 1.6rem; font-size: 1rem; border-radius: 13px; }
.btn--block { width: 100%; }
.btn--primary {
  background: linear-gradient(180deg, #4F8EF7 0%, var(--primary-2) 100%);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 24px -8px rgba(59,130,246,.7);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 14px 34px -10px rgba(59,130,246,.9); }
.btn--ghost { border: 1px solid var(--border-2); background: rgba(255,255,255,.03); color: var(--text); }
.btn--ghost:hover { border-color: rgba(148,163,184,.5); background: rgba(255,255,255,.06); }

/* ───────── nav ───────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(6, 10, 20, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--border);
}
.nav__inner { height: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.brand b { color: var(--text-2); font-weight: 600; }
.nav__links { display: flex; gap: 1.75rem; margin-left: auto; font-size: .9rem; color: var(--text-2); }
.nav__links a { transition: color .2s; }
.nav__links a:hover { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: .75rem; }
.nav__login { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--text-2); padding: 0 .5rem; }
.nav__login:hover { color: var(--text); }
.nav__burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-2); align-items: center; justify-content: center; }
.nav__mobile {
  position: absolute; top: var(--nav-h); left: 0; right: 0;
  background: rgba(6,10,20,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; padding: .5rem 16px 1rem;
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a { padding: .9rem .25rem; border-bottom: 1px solid var(--border); font-weight: 500; }
.nav__mobile a:last-child { border-bottom: 0; color: var(--primary); }

/* ───────── hero ───────── */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + 72px);
  text-align: center;
  overflow: hidden;
  --p: 0; --mx: 0; --my: 0;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.hero__glow--a { width: 620px; height: 420px; left: 50%; top: 4%; transform: translateX(-50%); background: rgba(59,130,246,.22); }
.hero__glow--b { width: 520px; height: 380px; left: 18%; top: 45%; background: rgba(99,102,241,.16); }
.hero__horizon {
  position: absolute; left: -10%; right: -10%; bottom: -160px; height: 520px;
  background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(37,99,235,.55), rgba(37,99,235,.12) 45%, transparent 70%);
}

.hero__content { position: relative; z-index: 3; max-width: 980px; margin: 0 auto; padding: 0 24px; }
.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .9rem .4rem .7rem; border-radius: 999px;
  font-size: .82rem; font-weight: 500; color: #C7D2FE;
  background: rgba(99,102,241,.1); border: 1px solid rgba(129,140,248,.28);
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(34,197,94,.18); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }

.hero__title {
  margin-top: 1.4rem;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  font-weight: 650;
  letter-spacing: -.04em;
}
.hero__title em { font-size: 1.08em; }
.hero__title .muted { color: #8293AD; }
.nw { white-space: nowrap; }
.hero__sub { margin: 1.4rem auto 0; max-width: 620px; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--text-2); }
.hero__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.hero__proof { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: center; font-size: .85rem; color: var(--text-3); }
.hero__proof li { display: inline-flex; align-items: center; gap: .45rem; }
.hero__proof .ic { color: var(--primary); }

/* Telas flutuando */
.orbit { position: absolute; left: 0; right: 0; top: 0; height: max(100vh, 720px); z-index: 1; pointer-events: none; perspective: 1400px; }
.pane {
  position: absolute; left: var(--x); right: var(--r, auto); top: var(--y);
  width: var(--w);
  transform-style: preserve-3d;
  transform:
    translate3d(calc(var(--mx) * var(--d) * -18px + var(--side, -1) * var(--p) * 160px),
                calc(var(--my) * var(--d) * -14px - var(--p) * 60px), 0)
    rotateY(var(--ry));
  opacity: calc(.9 - var(--p) * 1.3);
  will-change: transform, opacity;
}
.pane[style*="--x:auto"] { --side: 1; }
.pane__in {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(147,197,253,.38);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 30px 60px -20px rgba(0,0,0,.8),
    0 0 40px -8px rgba(59,130,246,.45);
  animation: bob 7s ease-in-out infinite;
  animation-delay: calc(var(--d) * -3s);
  background: var(--surface);
}
.pane__in img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos); filter: saturate(1.15) brightness(.95); }
.pane__in::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 35%, rgba(59,130,246,.12) 70%, rgba(129,140,248,.35) 100%);
  mix-blend-mode: screen;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.spark {
  position: absolute; left: var(--x); top: var(--y);
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--warning); box-shadow: 0 0 14px rgba(245,158,11,.8);
  transform: translate3d(calc(var(--mx) * var(--d) * -26px), calc(var(--my) * var(--d) * -20px), 0);
  opacity: calc(.85 - var(--p) * 1.5);
  animation: blink 4s ease-in-out infinite; animation-delay: calc(var(--d) * -2s);
}
.spark--b { background: var(--primary); box-shadow: 0 0 14px rgba(59,130,246,.9); width: 7px; height: 7px; }
.spark--g { background: var(--success); box-shadow: 0 0 14px rgba(34,197,94,.8); width: 7px; height: 7px; }
@keyframes blink { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }

/* Monitor principal */
.stage { position: relative; z-index: 2; margin: 64px auto 0; width: min(1120px, 92vw); perspective: 1600px; padding-bottom: 80px; }
.device {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(180deg, #172238, #0E1627);
  border: 1px solid rgba(148,163,184,.22);
  padding: 0 0 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 50px 100px -30px rgba(0,0,0,.9),
    0 0 120px -30px rgba(59,130,246,.55);
}
#heroDevice {
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--p)) * 24deg)) scale(calc(.92 + var(--p) * .08)) translateY(calc((1 - var(--p)) * 10px));
  will-change: transform;
}
.device__bar {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  background: rgba(255,255,255,.025); border-bottom: 1px solid var(--border);
}
.device__bar i { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.device__bar i:nth-child(1) { background: #EF4444aa; } .device__bar i:nth-child(2) { background: #F59E0Baa; } .device__bar i:nth-child(3) { background: #22C55Eaa; }
.device__bar span {
  margin: 0 auto; transform: translateX(-20px);
  font-size: .72rem; color: var(--text-3); letter-spacing: .02em;
  padding: 3px 14px; border-radius: 6px; background: rgba(255,255,255,.04);
}
.device > img { width: 100%; height: auto; }
.device__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%);
  transform: translateX(calc(-60% + var(--p) * 120%));
}

.float-card {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: .8rem; text-align: left;
  padding: .85rem 1.1rem .85rem .85rem; border-radius: 14px;
  background: rgba(17, 26, 46, .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-2);
  box-shadow: 0 20px 50px -15px rgba(0,0,0,.8);
  animation: bob 6s ease-in-out infinite;
}
.float-card small { display: block; font-size: .72rem; color: var(--text-3); line-height: 1.2; }
.float-card strong { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.float-card em { display: block; font-size: .72rem; color: var(--text-2); line-height: 1.2; }
.float-card__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.is-green { background: rgba(34,197,94,.14); color: var(--success); }
.is-amber { background: rgba(245,158,11,.14); color: var(--warning); }
.is-blue  { background: rgba(59,130,246,.16); color: #60A5FA; }
.float-card--a { left: -4%; top: 22%; }
.float-card--b { right: -5%; top: 46%; animation-delay: -2s; }
.float-card--c { left: 6%; bottom: 14%; animation-delay: -4s; }

/* ───────── ramos ───────── */
.ramos { padding: 8px 0 56px; text-align: center; }
.ramos p { font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--text-3); margin-bottom: 18px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__track span {
  padding: 0 2.2rem; font-size: 1.35rem; font-weight: 600; color: #64748B; white-space: nowrap; position: relative;
}
.marquee__track span::after { content: ''; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; border-radius: 1px; background: rgba(59,130,246,.45); transform: translateY(-50%) rotate(45deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ───────── seções ───────── */
.sec { position: relative; padding: 110px 0; }
.sec__head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.kicker {
  display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #93C5FD; margin-bottom: 14px;
}
.sec__head h2, .final h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 650;
}
.sec__head p { margin-top: 1.1rem; font-size: 1.08rem; color: var(--text-2); }

/* dor: antes x depois */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; }
.versus__col { border-radius: 18px; padding: 30px; border: 1px solid var(--border); }
.versus__col h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 18px; }
.versus__col li { display: flex; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--border); color: var(--text-2); }
.versus__col li:first-child { border-top: 0; }
.versus__col li .ic { margin-top: .2em; }
.versus__col--antes { background: rgba(239,68,68,.035); }
.versus__col--antes h3 { color: #FCA5A5; }
.versus__col--antes .ic { color: var(--danger); }
.versus__col--depois {
  background: linear-gradient(180deg, rgba(59,130,246,.09), rgba(59,130,246,.02));
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 0 60px -25px rgba(59,130,246,.6);
}
.versus__col--depois li { color: var(--text); }
.versus__col--depois .ic { color: var(--success); }
.versus__arrow { display: grid; place-items: center; color: var(--primary); }
.versus__arrow .ic { width: 28px; height: 28px; }

/* showcase em abas */
.showcase { display: grid; grid-template-columns: 330px 1fr; gap: 32px; align-items: start; }
.showcase__tabs { display: flex; flex-direction: column; gap: 6px; }
.tab {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 38px 1fr; gap: .1rem .85rem; align-items: center;
  text-align: left; padding: 14px 16px; border-radius: 13px;
  border: 1px solid transparent; color: var(--text-2);
  transition: background .25s, border-color .25s, color .25s;
}
.tab:hover { background: rgba(255,255,255,.03); color: var(--text); }
.tab__ic { grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(148,163,184,.08); transition: background .25s, color .25s; }
.tab b { font-weight: 600; font-size: .98rem; color: inherit; }
.tab span:last-of-type { font-size: .84rem; color: var(--text-3); line-height: 1.4; }
.tab[aria-selected="true"] { background: var(--surface); border-color: rgba(59,130,246,.35); color: var(--text); }
.tab[aria-selected="true"] .tab__ic { background: rgba(59,130,246,.18); color: #60A5FA; }
.tab__prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--grad); }
.tab[aria-selected="true"] .tab__prog { animation: prog var(--dur, 7s) linear forwards; }
.showcase.is-paused .tab__prog { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }

.showcase__view { position: sticky; top: calc(var(--nav-h) + 24px); }
.device--flat { box-shadow: 0 40px 90px -35px rgba(0,0,0,.9), 0 0 100px -40px rgba(59,130,246,.6); }
.showcase__screen { position: relative; aspect-ratio: 1600 / 860; background: #0F172A; }
.shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.015); transition: opacity .55s ease, transform .8s ease; }
.shot.is-on { opacity: 1; transform: none; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.hot {
  position: absolute; left: var(--hx); top: var(--hy);
  display: flex; align-items: center; gap: .5rem;
  transform: translate(-9px, -50%);
  opacity: 0; transition: opacity .4s ease .35s, transform .4s ease .35s;
}
.shot.is-on .hot { opacity: 1; }
.hot--left { flex-direction: row-reverse; transform: translate(calc(-100% + 9px), -50%); }
.hot i {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle, #fff 0 3px, var(--primary) 4px);
  box-shadow: 0 0 0 0 rgba(59,130,246,.6); animation: ping 2s infinite;
}
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,.65); } 80%,100% { box-shadow: 0 0 0 14px rgba(59,130,246,0); } }
.hot span {
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  padding: .4rem .7rem; border-radius: 8px;
  background: rgba(6,10,20,.88); border: 1px solid rgba(96,165,250,.45);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.9);
}
.showcase__caption { margin-top: 16px; font-size: .95rem; color: var(--text-2); min-height: 3em; }

/* um dia na loja */
.dia { padding-bottom: 40px; }
.dia__track { position: relative; height: 560vh; }
.dia__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.dia__grid { display: grid; grid-template-columns: 400px 1fr; gap: 56px; align-items: center; }
.dia__steps { position: relative; padding-left: 26px; }
.dia__steps::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--border-2); border-radius: 2px; }
.dia__steps::after { content: ''; position: absolute; left: 5px; top: 8px; width: 2px; height: calc(var(--dp, 0) * (100% - 16px)); background: var(--grad); border-radius: 2px; }
.dia__step { position: relative; padding: 10px 0; opacity: .32; transition: opacity .4s ease; }
.dia__step::before { content: ''; position: absolute; left: -26px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-2); transition: all .3s; z-index: 1; }
.dia__step time { font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dia__step h3 { font-size: 1.08rem; font-weight: 600; margin-top: 2px; }
.dia__step p { font-size: .92rem; color: var(--text-2); max-height: 0; overflow: hidden; transition: max-height .5s ease, margin .5s ease; }
.dia__step.is-on { opacity: 1; }
.dia__step.is-on::before { border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 5px rgba(59,130,246,.2); }
.dia__step.is-on time { color: #93C5FD; }
.dia__step.is-on p { max-height: 160px; margin-top: 6px; }
.dia__step.is-done::before { border-color: var(--primary); }
.dia__view { position: relative; }
.dia__screens { position: relative; aspect-ratio: 1600 / 860; background: #0F172A; }
.dia__screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.02); transition: opacity .6s ease, transform .9s ease; }
.dia__screens img.is-on { opacity: 1; transform: none; }
.dia__clock {
  position: absolute; right: -14px; top: -22px;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem; border-radius: 12px;
  background: rgba(17,26,46,.9); border: 1px solid var(--border-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.9);
}
.dia__clock .ic { color: var(--primary); }
.dia__badge {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.92);
  display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-radius: 12px;
  background: rgba(41,33,0,.92); border: 1px solid rgba(245,158,11,.5);
  box-shadow: 0 20px 50px -15px rgba(0,0,0,.9), 0 0 40px -10px rgba(245,158,11,.5);
  opacity: 0; transition: opacity .4s ease, transform .4s ease; pointer-events: none; white-space: nowrap;
}
.dia__badge.is-on { opacity: 1; transform: translate(-50%, -50%); }
.dia__badge .od-dot { background: var(--warning); box-shadow: 0 0 10px var(--warning); animation: blink 1.4s infinite; }
.dia__badge b { color: #FCD34D; }
.dia__badge em { color: var(--text-2); font-size: .85rem; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card {
  position: relative; border-radius: 18px; padding: 26px;
  background: linear-gradient(180deg, rgba(22,32,50,.9), rgba(17,26,46,.6));
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--cx, 50%) var(--cy, 0%), rgba(59,130,246,.14), transparent 45%);
}
.card:hover { border-color: rgba(59,130,246,.35); }
.card:hover::before { opacity: 1; }
.card h3 { font-size: 1.08rem; font-weight: 600; margin: 16px 0 6px; letter-spacing: -.01em; }
.card p { font-size: .92rem; color: var(--text-2); }
.card__ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: rgba(59,130,246,.14); color: #60A5FA; border: 1px solid rgba(59,130,246,.25); }
.card--xl { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.card--xl h3 { font-size: 1.5rem; }
.card--xl p { font-size: 1rem; max-width: 440px; }
.card--wide { grid-column: span 2; }

.offline-demo { margin-top: auto; padding-top: 28px; }
.od-row { display: flex; align-items: center; gap: .6rem; padding: 14px 16px; border-radius: 12px; background: rgba(6,10,20,.55); border: 1px solid var(--border); font-size: .9rem; }
.od-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); transition: background .3s, box-shadow .3s; }
.od-row em { margin-left: auto; color: var(--text-3); font-size: .82rem; font-variant-numeric: tabular-nums; }
.offline-demo.is-off .od-dot { background: var(--warning); box-shadow: 0 0 10px var(--warning); }
.offline-demo.is-off b { color: #FCD34D; }
.od-bar { margin-top: 10px; height: 6px; border-radius: 6px; background: rgba(148,163,184,.12); overflow: hidden; }
.od-bar i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 6px; transition: width .5s ease; }

.keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
kbd {
  font-family: var(--sans); font-size: .75rem; font-weight: 600; color: var(--text);
  padding: .3rem .55rem; border-radius: 7px; min-width: 34px; text-align: center;
  background: linear-gradient(180deg, #1E293B, #162032);
  border: 1px solid var(--border-2); box-shadow: 0 2px 0 #0B1222;
}
.hw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hw span { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-2); padding: .35rem .7rem; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.hw .ic { color: #60A5FA; }

/* depoimentos */
.depo { padding-bottom: 40px; }
.depo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1000px; margin: 0 auto; }
.depo__card {
  position: relative; display: flex; flex-direction: column; gap: 26px;
  padding: 34px 32px 28px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(22,32,50,.9), rgba(17,26,46,.55));
  border: 1px solid var(--border);
}
.depo__q { width: 34px; height: 34px; fill: rgba(96,165,250,.28); stroke: none; }
.depo__card blockquote { font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.45; font-weight: 500; letter-spacing: -.015em; }
.depo__card blockquote em { font-size: 1.1em; }
.depo__card figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.depo__av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(59,130,246,.16); color: #60A5FA; }
.depo__card b { display: block; font-weight: 600; font-size: .95rem; }
.depo__card small { color: var(--text-3); font-size: .82rem; }
@media (max-width: 860px) { .depo__grid { grid-template-columns: 1fr; } .depo__card { padding: 26px 22px 22px; } }

/* planos */
.planos::before {
  content: ''; position: absolute; left: 50%; top: 30%; width: 900px; height: 500px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(59,130,246,.13), transparent 65%); pointer-events: none;
}
.plans { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.plan {
  position: relative; border-radius: 20px; padding: 30px 28px;
  background: rgba(17,26,46,.72); border: 1px solid var(--border);
}
.plan h3 { font-size: 1.2rem; font-weight: 650; }
.plan header p { margin-top: 6px; font-size: .9rem; color: var(--text-2); min-height: 2.9em; }
.plan__price { display: flex; align-items: baseline; gap: .3rem; margin-top: 22px; }
.plan__price .cur { font-size: 1.05rem; color: var(--text-2); font-weight: 600; }
.plan__price .val { font-size: 3.4rem; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.plan__price .per { color: var(--text-3); font-size: .95rem; }
.plan__price--talk .val { font-size: 2.3rem; letter-spacing: -.03em; line-height: 1.48; }
.plan__day { font-size: .86rem; color: var(--text-3); margin: 8px 0 22px; }
.plan__day b { color: #86EFAC; font-weight: 600; }
.plan__list { margin-top: 24px; display: grid; gap: 11px; }
.plan__list li { display: flex; gap: .65rem; font-size: .92rem; color: var(--text-2); }
.plan__list .ic { color: var(--success); margin-top: .22em; width: 1em; height: 1em; }
.plan__all { color: var(--text) !important; font-weight: 600; }
.plan--hot {
  background: linear-gradient(180deg, rgba(30,58,138,.38), rgba(17,26,46,.85) 55%);
  border-color: rgba(96,165,250,.5);
  box-shadow: 0 0 0 1px rgba(96,165,250,.15) inset, 0 30px 80px -30px rgba(59,130,246,.7);
  transform: translateY(-10px);
}
.plan__badge {
  position: absolute; top: -12px; left: 28px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; color: #fff;
  background: linear-gradient(90deg, var(--primary-2), var(--indigo));
}
.plans__note { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: 34px; font-size: .9rem; color: var(--text-3); text-align: center; }
.plans__note .ic { color: var(--success); }

/* em breve */
.breve { padding: 10px 0 90px; }
.breve__box {
  display: flex; align-items: center; gap: 22px; padding: 26px 30px; border-radius: 18px;
  border: 1px dashed rgba(148,163,184,.3); background: rgba(255,255,255,.015);
}
.breve__box .kicker { margin-bottom: 4px; color: var(--warning); }
.breve__box h3 { font-size: 1.15rem; font-weight: 600; }
.breve__box p { font-size: .92rem; color: var(--text-2); margin-top: 4px; max-width: 640px; }
.breve__box .btn { margin-left: auto; flex-shrink: 0; }
.breve__box .card__ic { flex-shrink: 0; background: rgba(245,158,11,.12); color: var(--warning); border-color: rgba(245,158,11,.25); }

/* fundador */
.fundador { padding-top: 40px; }
.fundador__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
.fundador blockquote { font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.45; letter-spacing: -.015em; font-weight: 500; }
.fundador blockquote em { font-size: 1.08em; }
.fundador__sig { margin-top: 20px; color: var(--text-3); font-size: .92rem; }
.fundador__sig b { color: var(--text); font-weight: 600; }
.fundador__facts { display: grid; gap: 12px; }
.fundador__facts li { display: flex; gap: 14px; padding: 18px; border-radius: 14px; border: 1px solid var(--border); background: rgba(17,26,46,.55); }
.fundador__facts .ic { width: 22px; height: 22px; color: #60A5FA; margin-top: 2px; }
.fundador__facts b { display: block; font-weight: 600; }
.fundador__facts span { font-size: .9rem; color: var(--text-2); }

/* faq */
.faq__list { display: grid; gap: 10px; }
.faq details { border-radius: 14px; border: 1px solid var(--border); background: rgba(17,26,46,.55); transition: border-color .25s, background .25s; }
.faq details[open] { border-color: rgba(59,130,246,.35); background: rgba(17,26,46,.9); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 20px 22px; font-weight: 600; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--text-3); transition: transform .3s; }
.faq details[open] summary .ic { transform: rotate(180deg); color: var(--primary); }
.faq details p { padding: 0 22px 20px; color: var(--text-2); font-size: .95rem; }

/* cta final */
.final { padding-top: 40px; }
.final__box {
  position: relative; overflow: hidden; text-align: center;
  padding: 90px 32px; border-radius: 28px;
  background: linear-gradient(180deg, #0D1A36, #0A1124);
  border: 1px solid rgba(96,165,250,.3);
}
.final__glow { position: absolute; left: 50%; bottom: -260px; width: 900px; height: 520px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(59,130,246,.55), transparent 65%); pointer-events: none; }
.final__box > *:not(.final__glow) { position: relative; }
.final h2 { max-width: 760px; margin: 0 auto; }
.final p { margin: 18px auto 30px; color: var(--text-2); font-size: 1.08rem; max-width: 520px; }
.final small { display: block; margin-top: 14px; color: var(--text-3); font-size: .85rem; }

/* rodapé */
.foot { border-top: 1px solid var(--border); padding: 36px 0; margin-top: 40px; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.foot nav { display: flex; gap: 1.5rem; font-size: .88rem; color: var(--text-2); margin-left: auto; }
.foot nav a:hover { color: var(--text); }
.foot small { width: 100%; color: var(--text-3); font-size: .8rem; }

/* barra móvel */
.mbar { display: none; }

/* revelar ao rolar */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
/* Topo: anima só com CSS, sem esperar o JS baixar. Começa quase invisível (e não
   em zero) para o navegador já contar como conteúdo pintado. */
.entra { animation: entra .7s cubic-bezier(.2,.7,.2,1) both; }
.hero__content .entra:nth-child(2) { animation-delay: .06s; }
.hero__content .entra:nth-child(3) { animation-delay: .12s; }
.hero__content .entra:nth-child(4) { animation-delay: .18s; }
.hero__content .entra:nth-child(5) { animation-delay: .24s; }
@keyframes entra { from { opacity: .01; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ───────── responsivo ───────── */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__actions { margin-left: auto; }
  .showcase { grid-template-columns: 1fr; }
  .showcase__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .showcase__tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; grid-template-columns: 30px auto; scroll-snap-align: start; padding: 10px 14px; }
  .tab__ic { width: 30px; height: 30px; grid-row: auto; }
  .tab span:last-of-type { display: none; }
  .showcase__view { position: static; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .dia__grid { grid-template-columns: 340px 1fr; gap: 36px; }
  .float-card--a { left: 0; } .float-card--b { right: 0; }
}

@media (max-width: 860px) {
  :root { --nav-h: 60px; }
  .nav__login { display: none; }
  .nav__actions .btn { display: none; }
  .nav__burger { display: inline-flex; }

  .hero { padding-top: calc(var(--nav-h) + 40px); }
  .pane { --w: 30vw !important; }
  .pane:nth-child(2), .pane:nth-child(3), .pane:nth-child(6), .pane:nth-child(7) { display: none; }
  .pane:nth-child(1) { --x: -8% !important; --y: 3% !important; }
  .pane:nth-child(4) { --x: -10% !important; --y: 36% !important; }
  .pane:nth-child(5) { --r: -8% !important; --y: 4% !important; }
  .pane:nth-child(8) { --r: -10% !important; --y: 38% !important; }
  .orbit { opacity: .45; }
  .spark { display: none; }
  .stage { margin-top: 44px; padding-bottom: 50px; }
  .float-card { padding: .6rem .8rem .6rem .6rem; gap: .6rem; }
  .float-card strong { font-size: .9rem; }
  .float-card__ic { width: 30px; height: 30px; }
  .float-card--a { left: -2%; top: auto; bottom: -6%; }
  .float-card--b { right: -2%; top: -8%; }
  .float-card--c { display: none; }

  .sec { padding: 80px 0; }
  .sec__head { margin-bottom: 40px; }
  .versus { grid-template-columns: 1fr; }
  .versus__arrow { transform: rotate(90deg); }
  .versus__col { padding: 22px; }

  .hot span { display: none; }

  /* No celular o "dia" vira lista: cada passo com a própria tela */
  .dia__track { height: auto; }
  .dia__sticky { position: static; height: auto; display: block; }
  .dia__grid { grid-template-columns: 1fr; }
  .dia__view { display: none; }
  .dia__steps { padding-left: 22px; display: grid; gap: 26px; }
  .dia__steps::after { display: none; }
  .dia__step { opacity: 1; }
  .dia__step::before { border-color: var(--primary); }
  .dia__step p { max-height: none; margin-top: 6px; }
  .dia__step .dia__thumb { display: block; margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-2); aspect-ratio: 16/9; }
  .dia__step .dia__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

  .bento { grid-template-columns: 1fr; }
  .card--xl, .card--wide { grid-column: auto; grid-row: auto; }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plan--hot { transform: none; order: -1; }
  .plan header p { min-height: 0; }
  .breve__box { flex-direction: column; align-items: flex-start; }
  .breve__box .btn { margin-left: 0; }
  .fundador__grid { grid-template-columns: 1fr; gap: 32px; }
  .final__box { padding: 64px 22px; }
  .foot nav { margin-left: 0; }

  .mbar {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 40;
    display: flex; align-items: center; gap: .75rem; justify-content: space-between;
    padding: 10px 10px 10px 16px; border-radius: 14px;
    background: rgba(11,18,34,.92); border: 1px solid var(--border-2);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 16px 40px -10px rgba(0,0,0,.9);
    transform: translateY(140%); transition: transform .35s ease;
  }
  .mbar.is-on { transform: none; }
  .mbar b { display: block; font-size: .86rem; line-height: 1.2; white-space: nowrap; }
  .mbar span { font-size: .78rem; color: #86EFAC; }
  .foot { padding-bottom: 96px; }
}

@media (max-width: 480px) {
  :root { --gut: 16px; }
  .wrap { padding: 0 16px; }
  .nav__inner { padding: 0 16px; }
  .hero__content { padding: 0 16px; }
  .hero__ctas .btn { width: 100%; }
  .pill { font-size: .74rem; }
  .device__bar { height: 26px; }
  .device__bar span { display: none; }
  .device { border-radius: 10px; }
}

.dia__thumb { display: none; }

/* ═════════════════════ CELULAR DE VERDADE ═════════════════════
   No computador nada muda. No celular, em vez de empilhar a versão de PC:
   - telas do sistema viram "lupas" (o pedaço que importa, ampliado e legível);
   - seções longas viram cartões que se deslizam para o lado;
   - "O problema" vira uma chave Hoje x Com o Nexus. */

/* peças que só existem no celular */
.versus-switch, .plans-tabs, .ctl-m, .dia-m, .dots { display: none; }

/* tela inteira (abre ao tocar numa lupa) */
.viewer {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text);
  display: none; flex-direction: column;
}
.viewer[open] { display: flex; }
.viewer::backdrop { background: rgba(2,6,23,.85); }
.viewer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.viewer__close {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text); cursor: pointer;
}
.viewer__scroll { flex: 1; overflow: auto; display: flex; align-items: center; -webkit-overflow-scrolling: touch; }
.viewer__scroll img { width: max(260%, 980px); max-width: none; height: auto; display: block; }
.viewer__hint { text-align: center; font-size: .8rem; color: var(--text-3); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }

@media (max-width: 860px) {
  :root { --gut: 24px; } /* margem lateral da .wrap; 16px abaixo de 480 */
  /* ── carrossel genérico ── */
  .snap {
    display: flex !important; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--gut) * -1); padding: 4px var(--gut) 8px; scroll-padding: 0 var(--gut);
  }
  .snap::-webkit-scrollbar { display: none; }
  .snap > * { flex: 0 0 86%; scroll-snap-align: center; scroll-snap-stop: always; }
  .dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--border-2); transition: width .25s, background .25s; }
  .dots i.is-on { width: 20px; background: var(--primary); }

  /* ── lupa: o pedaço da tela que importa, legível ── */
  .lupa {
    position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0;
    overflow: hidden; border-radius: 14px; border: 1px solid var(--border-2);
    background: #0B1222; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
  }
  .lupa img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: var(--fx) var(--fy);
    transform: scale(var(--z)); transform-origin: var(--fx) var(--fy);
  }
  .lupa::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
    background: linear-gradient(transparent, rgba(6,10,20,.75)); pointer-events: none;
  }
  .lupa__hint {
    position: absolute; right: 10px; bottom: 10px; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 99px; font-size: .74rem; font-weight: 600;
    background: rgba(17,26,46,.9); border: 1px solid var(--border-2); color: var(--text);
  }
  .lupa__hint .ic { width: 14px; height: 14px; transform: rotate(-45deg); }

  /* ── hero: o monitor mostra o painel ampliado, legível ── */
  .stage { padding-bottom: 76px; } /* o cartão "Lucro no período" pendurado embaixo não pisa na faixa seguinte */
  #heroDevice { cursor: zoom-in; }
  #heroDevice > img {
    aspect-ratio: 4 / 3; object-fit: cover;
    object-position: 18% 22%; transform: scale(1.75); transform-origin: 18% 22%;
  }

  /* ── "O problema": chave Hoje x Com o Nexus ── */
  .versus-switch {
    position: relative; display: grid; grid-template-columns: 1fr 1fr;
    padding: 4px; margin: 0 auto 16px; max-width: 420px;
    border-radius: 99px; background: var(--surface); border: 1px solid var(--border-2);
  }
  .versus-switch button {
    position: relative; z-index: 1; height: 42px; border: 0; background: none; cursor: pointer;
    font: 600 .86rem var(--sans); color: var(--text-2); border-radius: 99px;
    transition: color .3s;
  }
  .versus-switch button[aria-selected="true"] { color: #fff; }
  .versus-switch__pill {
    position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
    border-radius: 99px; background: rgba(239,68,68,.22); border: 1px solid rgba(239,68,68,.45);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), background .45s, border-color .45s;
  }
  .versus-switch.is-depois .versus-switch__pill {
    transform: translateX(100%);
    background: linear-gradient(100deg, var(--primary-2), var(--primary)); border-color: transparent;
    box-shadow: 0 8px 24px -8px rgba(59,130,246,.8);
  }
  .versus__arrow { display: none; }
  .versus { display: block; }
  .versus .versus__col h3 { display: none; } /* o título já está na chave */
  .versus.is-antes .versus__col--depois, .versus.is-depois .versus__col--antes { display: none; }
  .versus .versus__col { animation: virar .45s cubic-bezier(.2,.8,.2,1); }

  /* ── "Controle total": um cartão por área ── */
  .showcase { display: none; }
  .ctl-m { margin-top: 4px; }
  .ctl-m__card {
    display: flex; flex-direction: column; gap: 14px; padding: 16px;
    border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
    transition: border-color .3s, box-shadow .3s;
  }
  .ctl-m__card.is-on { border-color: rgba(59,130,246,.45); box-shadow: 0 0 40px -20px rgba(59,130,246,.8); }
  .ctl-m__card header { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; }
  .ctl-m__card header b { display: block; font-size: 1.02rem; }
  .ctl-m__card header span:not(.tab__ic) { display: block; font-size: .84rem; color: var(--text-2); line-height: 1.35; }
  .ctl-m__card ul { list-style: none; display: grid; gap: 8px; }
  .ctl-m__card li { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--text); }
  .ctl-m__card li .ic { color: var(--success); margin-top: .15em; flex-shrink: 0; }

  /* ── "Um dia na loja": stories ── */
  .dia__track { display: none; }
  .dia-m { display: block; }
  .dia-m__barra { display: flex; gap: 4px; padding: 0 2px; margin-bottom: 14px; }
  .dia-m__barra i { flex: 1; height: 4px; border-radius: 99px; background: var(--border-2); cursor: pointer; transition: background .3s; }
  .dia-m__barra i.is-done { background: rgba(59,130,246,.55); }
  .dia-m__barra i.is-on { background: var(--primary); box-shadow: 0 0 10px rgba(59,130,246,.8); }
  .dia-m__trilho > * { flex-basis: 92%; } /* o próximo horário aparece na beirada: convida a deslizar */
  .dia-m__story {
    display: flex; flex-direction: column; gap: 8px; padding: 18px;
    border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
  }
  .dia-m__story time {
    align-self: flex-start; padding: 4px 10px; border-radius: 99px;
    font: 700 .8rem var(--sans); color: #93C5FD; background: rgba(59,130,246,.14);
  }
  .dia-m__story h3 { font-size: 1.15rem; line-height: 1.25; }
  .dia-m__story p { font-size: .9rem; color: var(--text-2); margin-bottom: 6px; }
  .dia-m__story .lupa { margin-top: auto; }

  /* ── recursos: grade compacta de 2 colunas ── */
  .bento { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bento .card { padding: 16px 14px; }
  .bento .card h3 { font-size: .95rem; margin: 12px 0 4px; line-height: 1.25; }
  .bento .card p { font-size: .82rem; line-height: 1.45; }
  .bento .card__ic { width: 36px; height: 36px; }
  .card--xl, .card--wide { grid-column: span 2; }
  .card--xl h3 { font-size: 1.2rem; }
  .bento .keys { flex-wrap: wrap; }

  /* ── depoimentos e planos: deslizando ── */
  .depo__grid > * { flex-basis: 88%; }
  .plans-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
    margin: 0 auto 16px; max-width: 460px; border-radius: 99px;
    background: var(--surface); border: 1px solid var(--border-2);
  }
  .plans-tabs button {
    height: 40px; border: 0; border-radius: 99px; background: none; cursor: pointer;
    font: 600 .84rem var(--sans); color: var(--text-2); transition: background .3s, color .3s;
  }
  .plans-tabs button[aria-selected="true"] {
    color: #fff; background: linear-gradient(100deg, var(--primary-2), var(--primary));
    box-shadow: 0 8px 22px -8px rgba(59,130,246,.8);
  }
  .plans { max-width: none; margin: 0 calc(var(--gut) * -1); align-items: stretch; }
  .plans > .plan { flex-basis: 88%; }
  .plans.snap { padding-top: 18px; } /* o selo "Com nota fiscal" sobe acima do cartão */
  .plan--hot { order: 0; } /* a ordem do seletor manda: Essencial, Fiscal, Alto volume */
}
/* precisa vir DEPOIS do bloco de 860px, que também casa abaixo de 480px */
@media (max-width: 480px) { :root { --gut: 16px; } }
/* celular bem estreito (320-370px): a barra de baixo cortava o botão do WhatsApp */
@media (max-width: 370px) {
  .mbar { gap: .5rem; padding-left: 12px; }
  .mbar > div { min-width: 0; }
  .mbar b { font-size: .78rem; white-space: normal; }
  .mbar span { font-size: .72rem; }
  .mbar .btn { padding: 0 .75rem; font-size: .8rem; }
}
@keyframes virar { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .js .reveal, .entra { opacity: 1; transform: none; }
}