@font-face {
  font-family: "Mona Sans";
  src: url("assets/fonts/MonaSansVF.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

:root, .approved-landing-shell {
  color-scheme: dark;
  --bg: #08080a;
  --bg-soft: #0b0d0e;
  --panel: #101313;
  --panel-2: #141717;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.14);
  --ink: #f5f5f4;
  --ink-2: #afb4b2;
  --ink-3: #777e7b;
  --green: #00ff51;
  --green-soft: rgba(0,255,81,.09);
  --green-line: rgba(0,255,81,.24);
  --blue: #1749ff;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --shadow: 0 32px 90px rgba(0,0,0,.42);
  --radius: 24px;
  --header: 76px;
}

/* La landing siempre usa su paleta oscura, aunque el usuario tenga el tema
   claro guardado para la aplicación. Sus tokens deben vivir en el contenedor
   para que html.light no los sustituya por los del sistema. */
.approved-landing-shell {
  min-height: 100vh;
  /* Transparente a propósito: el fondo oscuro lo pone body:has(...) y encima van los
     resplandores verdes del body. Un fondo opaco aquí los tapaba (25-sep-2026). */
  background: transparent;
  color: var(--ink);
  color-scheme: dark;
}
html:has(.approved-landing-shell),
body:has(.approved-landing-shell) {
  background: #08080a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 24px); background: var(--bg); }
body {
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(circle at 50% -20%, rgba(26,60,47,.13), transparent 28rem),
    var(--bg);
  color: var(--ink);
  font-family: "Mona Sans", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
em { color: var(--green); font-style: normal; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: white;
  color: #08080a;
  transform: translateY(-150%);
  transition: transform 180ms var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}
.section { padding: 116px 0; position: relative; }
.eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.section-intro { margin-bottom: 50px; }
.section-intro h2,
.faq-heading h2,
.final-card h2 {
  margin-top: 18px;
  font-size: clamp(42px, 5.1vw, 72px);
  font-weight: 720;
  letter-spacing: -.055em;
  line-height: .98;
}
.section-intro > p:last-child,
.section-intro.split > p {
  max-width: 520px;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.65;
}
.section-intro.centered { max-width: 920px; margin-inline: auto; text-align: center; }
.section-intro.centered > p:last-child { margin: 24px auto 0; }
.section-intro.split {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr);
  align-items: end;
  gap: 60px;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  width: 100%;
  height: var(--header);
  border-bottom: 1px solid transparent;
  transition: background-color 220ms ease, border-color 220ms ease;
}
.approved-landing-shell { position: relative; isolation: isolate; }
.approved-landing-shell .site-header { isolation: isolate; }
.site-header.is-scrolled {
  border-color: var(--line);
  background: rgba(8,8,10,.78);
  backdrop-filter: blur(20px) saturate(1.2);
}
.nav-shell { height: 100%; display: flex; align-items: center; }
.brand { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; font-size: 20px; font-weight: 680; letter-spacing: -.04em; }
.brand > span > span { color: var(--green); }
.desktop-nav { display: flex; gap: 38px; margin-left: auto; margin-right: 42px; }
.desktop-nav a, .nav-demo {
  position: relative;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 590;
  transition: color 160ms ease;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 200ms var(--ease-out);
}
.nav-actions { display: flex; align-items: center; gap: 20px; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 680;
  line-height: 1;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 180ms ease;
}
.button:active { transform: scale(.97); }
.button-small { min-height: 42px; padding: 0 18px; font-size: 13px; }
.button-large { min-height: 54px; padding: 0 24px; font-size: 15px; }
.button-light {
  background: #f5f5f4;
  color: #0b0d0d;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 10px 30px rgba(0,0,0,.22);
}
.button-light span:last-child { color: #00a936; }
.button-ghost { border-color: var(--line-strong); background: rgba(255,255,255,.035); color: var(--ink); }
.button-outline { width: 100%; border-color: var(--line-strong); background: transparent; }
.play { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 8px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); cursor: pointer; }
.menu-toggle span { display: block; width: 17px; height: 1px; margin: 5px auto; background: var(--ink); transition: transform 180ms var(--ease-out); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.mobile-menu { display: none; }

.hero {
  position: relative;
  z-index: 0;
  min-height: 820px;
  padding: 152px 0 32px;
  overflow: hidden;
}
.hero-aura, .product-aura, .relationship-aura {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(20px);
}
.hero-aura {
  top: 3%;
  right: -8%;
  width: 56vw;
  height: 56vw;
  background: radial-gradient(circle, rgba(0,255,81,.15), rgba(0,82,255,.08) 34%, transparent 68%);
  opacity: .82;
}
.hero-grid { display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 70px; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 {
  margin-top: 20px;
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 720;
  letter-spacing: -.066em;
  line-height: .94;
}
.hero-lead { max-width: 550px; margin-top: 30px; color: var(--ink-2); font-size: 20px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 17px; color: var(--ink-3); font-size: 13px; }
.hero-note span { color: var(--green); }
.hero-media { position: relative; min-width: 0; padding: 26px 0 52px; }
.hero-media, .hero-copy { isolation: isolate; }
.hero-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.18;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #111;
  box-shadow: var(--shadow);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 51% 44%; }
.photo-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,10,.12), transparent 46%),
    linear-gradient(0deg, rgba(8,8,10,.72), transparent 46%),
    radial-gradient(circle at 79% 45%, rgba(0,255,81,.10), transparent 32%);
}
.glass-card {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,13,13,.74);
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(18px) saturate(1.2);
}
.hero-status { right: -28px; bottom: 8px; width: 275px; padding: 18px; border-radius: 18px; }
.hero-status > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }
.hero-status span, .hero-status small { color: var(--ink-2); font-size: 11px; }
.hero-status strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.hero-status small { display: block; margin-top: 10px; color: var(--ink-3); }
.status-chart { display: flex; height: 44px; align-items: end; gap: 7px; margin-top: 14px; }
.status-chart i { width: 100%; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(#19e85b,#00872e); }
.hero-ticket { left: -34px; bottom: 90px; display: flex; min-width: 212px; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; }
.ticket-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 13px; }
.hero-ticket div { display: grid; gap: 3px; }
.hero-ticket strong { font-size: 13px; }
.hero-ticket small { color: var(--ink-2); font-size: 11px; }
.hero-proof { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 56px; padding: 20px 0 0; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; }

.evolution { padding-top: 142px; }
.evolution-rail { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.evolution-card {
  position: relative;
  display: grid;
  min-height: 470px;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
  transition: transform 220ms var(--ease-out), border-color 220ms ease, background-color 220ms ease;
}
.evolution-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 16%, rgba(255,255,255,.06), transparent 42%);
  opacity: 0;
  transition: opacity 220ms ease;
}
.evolution-card.is-current { border-color: rgba(255,255,255,.18); background-color: rgba(255,255,255,.018); }
.evolution-card.is-current::before { opacity: 1; }
.evolution-connected { border-color: var(--green-line); background: linear-gradient(145deg, rgba(0,255,81,.065), rgba(255,255,255,.012)); }
.stage-number { position: absolute; z-index: 2; top: 20px; right: 22px; color: var(--ink-3); font: 650 11px/1 "Mona Sans"; letter-spacing: .12em; }
.evolution-card > div:last-child { position: relative; z-index: 2; padding-top: 24px; border-top: 1px solid var(--line); }
.evolution-card h3 { font-size: 23px; letter-spacing: -.025em; }
.evolution-card p { margin-top: 10px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.paper-scene, .sheet-scene, .connected-scene { position: relative; align-self: center; width: 88%; margin: auto; transform: rotate(-2deg); }
.paper-scene {
  aspect-ratio: 1.2;
  border-radius: 6px;
  background: #e9e1ce;
  box-shadow: 0 20px 45px rgba(0,0,0,.32);
  color: #32302b;
}
.paper-lines { position: absolute; inset: 28px; display: grid; align-content: start; gap: 18px; background: repeating-linear-gradient(transparent 0 25px, rgba(61,84,95,.18) 26px 27px); font-family: ui-monospace, monospace; font-size: 12px; }
.paper-lines b { font-size: 9px; letter-spacing: .16em; }
.paper-lines span { font-weight: 650; }
.paper-lines em { margin-top: 8px; color: #695848; font-family: cursive; font-size: 18px; transform: rotate(-4deg); }
.sheet-scene { aspect-ratio: 1.35; overflow: hidden; border: 1px solid #cfd4d1; border-radius: 9px; background: #f2f4f3; color: #2c3732; transform: rotate(1.5deg); box-shadow: 0 20px 45px rgba(0,0,0,.3); }
.sheet-top { height: 32px; padding: 9px 12px; background: #17673e; color: white; font-size: 9px; }
.sheet-cells { display: grid; grid-template-columns: repeat(4,1fr); padding: 14px; }
.sheet-cells i { height: 29px; border-right: 1px solid #d1d8d4; border-bottom: 1px solid #d1d8d4; }
.sheet-scene > span { position: absolute; right: 16px; bottom: 13px; padding: 6px 8px; border: 1px solid #b8c2bd; border-radius: 5px; background: white; color: #17673e; font: 700 9px/1 ui-monospace; }
.connected-scene { display: flex; aspect-ratio: 1.35; flex-direction: column; justify-content: center; padding: 24px; border: 1px solid rgba(0,255,81,.18); border-radius: 15px; background: #0c1110; color: var(--green); transform: none; box-shadow: 0 0 54px rgba(0,255,81,.09), 0 24px 45px rgba(0,0,0,.35); }
.connected-scene header { position: absolute; top: 17px; right: 18px; left: 18px; display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 10px; font-weight: 650; }
.connected-scene header span { margin-left: auto; color: var(--ink-3); }
.connected-scene strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.connected-scene small { margin-top: 3px; color: var(--ink-2); font-size: 9px; }
.connected-scene svg { width: 100%; height: 70px; margin-top: 15px; }

.product { overflow: hidden; padding-top: 134px; background: linear-gradient(180deg, transparent, rgba(8,14,12,.64) 30%, rgba(8,12,11,.75) 72%, transparent); }
.product-aura { top: 7%; left: 20%; width: 60%; height: 35%; background: radial-gradient(circle, rgba(0,255,81,.10), rgba(15,72,255,.06) 38%, transparent 70%); }
.product-toolbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.product-tabs, .device-tabs, .billing-toggle {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.028);
}
.product-tabs button, .device-tabs button, .theme-toggle, .billing-toggle button, .industry-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 640;
  transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out), border-color 180ms ease;
}
.product-tabs button { padding: 0 19px; }
.product-tabs button[aria-selected="true"], .device-tabs button[aria-pressed="true"], .billing-toggle button[aria-pressed="true"], .industry-tabs button[aria-selected="true"] { background: #f1f3f1; color: #111413; }
.product-tabs button:active, .device-tabs button:active, .theme-toggle:active, .billing-toggle button:active, .industry-tabs button:active { transform: scale(.96); }
.view-controls { display: flex; align-items: center; gap: 10px; }
.device-tabs button { display: inline-flex; min-width: 43px; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; }
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid var(--line); }
.device-stage { position: relative; min-height: 730px; perspective: 1600px; }
.device-shell {
  position: relative;
  width: 100%;
  max-width: 1220px;
  margin: auto;
  padding: 12px;
  border: 1px solid #313735;
  border-radius: 25px 25px 18px 18px;
  background: linear-gradient(145deg,#282d2b,#0c0f0e);
  box-shadow: 0 55px 130px rgba(0,0,0,.55), 0 0 100px rgba(0,255,81,.055);
  transform-origin: top center;
}
.device-camera { position: absolute; z-index: 4; top: 4px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #050605; box-shadow: 0 0 0 1px rgba(255,255,255,.05); }
.device-base { position: absolute; right: -4%; bottom: -22px; left: -4%; height: 28px; border-radius: 3px 3px 18px 18px; background: linear-gradient(#313735,#101211 58%,#050606); box-shadow: 0 18px 40px rgba(0,0,0,.5); transition: opacity 240ms ease, transform 420ms var(--ease-in-out); }
.app-window {
  --app-bg: #080d0b;
  --app-panel: #0d1310;
  --app-panel-2: #101713;
  --app-line: rgba(255,255,255,.075);
  --app-ink: #edf2ef;
  --app-ink-2: #8c9892;
  --app-positive: #31cb70;
  --app-danger: #e39191;
  --app-shadow: none;
  display: grid;
  height: 680px;
  grid-template-columns: 154px minmax(0,1fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 15px;
  background: var(--app-bg);
  color: var(--app-ink);
  transition: background-color 220ms ease, color 220ms ease;
}
.app-window[data-app-theme="light"] {
  color-scheme: light;
  --app-bg: #edf1ef;
  --app-panel: #ffffff;
  --app-panel-2: #f6f8f7;
  --app-line: rgba(20,38,30,.12);
  --app-ink: #17201c;
  --app-ink-2: #626c67;
  --app-positive: #087a43;
  --app-danger: #a23f3f;
  --app-shadow: 0 6px 16px rgba(20,34,28,.07);
}
.app-sidebar { display: flex; min-width: 0; flex-direction: column; padding: 18px 12px; border-right: 1px solid var(--app-line); background: color-mix(in srgb,var(--app-panel) 82%,transparent); }
.app-logo { display: flex; align-items: center; gap: 8px; padding: 0 6px 20px; font-size: 12px; font-weight: 750; }
.app-sidebar nav { display: grid; gap: 4px; }
.app-sidebar nav i { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; color: var(--app-ink-2); font-size: 10px; font-style: normal; }
.app-sidebar nav i.active { background: rgba(34,197,94,.10); color: var(--app-positive); }
.app-sidebar > small { margin-top: auto; padding: 10px; color: var(--app-ink-2); font-size: 8px; }
.app-canvas { min-width: 0; overflow: hidden; }
.app-topbar { display: flex; height: 47px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--app-line); background: color-mix(in srgb,var(--app-panel) 72%,transparent); font-size: 9px; }
.app-topbar > div { display: flex; align-items: center; gap: 8px; }
.app-topbar span { color: var(--app-ink-2); }
.app-topbar strong { font-size: 10px; }
.app-topbar button { min-height: 26px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-panel-2); color: var(--app-ink); font-size: 8px; }
.demo-label { padding: 5px 8px; border-radius: 999px; background: rgba(34,197,94,.08); color: var(--app-positive) !important; }
.app-panel { height: calc(100% - 47px); padding: 16px; overflow: auto; scrollbar-width: none; animation: appPanelIn 260ms var(--ease-out) both; }
.app-panel::-webkit-scrollbar { display: none; }
@keyframes appPanelIn { from { opacity: 0; transform: translate3d(0,8px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
.dash-head, .module-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.dash-head h3, .module-head h3 { margin-top: 3px; font-size: 15px; letter-spacing: -.025em; }
.dash-head small, .module-head > span { color: var(--app-ink-2); font-size: 7px; }
.date-pills { display: flex; gap: 4px; }
.date-pills span, .date-pills b { padding: 7px 9px; border: 1px solid var(--app-line); border-radius: 6px; color: var(--app-ink-2); font-size: 7px; font-weight: 550; }
.date-pills b { border-color: rgba(34,197,94,.26); background: #20bc5b; color: #06180d; }
.kpi-row { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 9px; overflow: hidden; border: 1px solid var(--app-line); border-radius: 11px; background: var(--app-panel); box-shadow: var(--app-shadow); }
.kpi-row article { min-width: 0; min-height: 76px; padding: 12px; border-right: 1px solid var(--app-line); }
.kpi-row article:last-child { border: 0; }
.kpi-row span, .kpi-row small { display: block; overflow: hidden; color: var(--app-ink-2); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.kpi-row strong { display: block; margin: 8px 0 4px; font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.kpi-row article:first-child strong { color: var(--app-positive); }
.kpi-row strong small { display: inline; font-size: 8px; }
.kpi-row article:first-child small { color: var(--app-positive); }
.dash-main { display: grid; grid-template-columns: minmax(0,2fr) minmax(160px,.72fr); gap: 9px; }
.balance-card, .quick-grid article, .hour-card, .calendar-card, .table-map, .order-card, .crm-list, .automation-card {
  border: 1px solid var(--app-line);
  border-radius: 11px;
  background: var(--app-panel);
  box-shadow: var(--app-shadow);
}
.balance-card { min-width: 0; padding: 13px; }
.balance-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.balance-head > div:first-child span { display: block; color: var(--app-ink-2); font-size: 7px; text-transform: uppercase; letter-spacing: .12em; }
.balance-head > div:first-child strong { display: block; margin-top: 6px; color: var(--app-positive); font-size: 18px; letter-spacing: -.025em; }
.micro-pills { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--app-line); border-radius: 999px; }
.micro-pills i { padding: 4px 7px; border-radius: 999px; color: var(--app-ink-2); font-size: 6px; font-style: normal; }
.micro-pills i.on { background: var(--app-panel-2); color: var(--app-ink); }
.legend { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 8px; color: var(--app-ink-2); font-size: 6px; }
.legend span { display: flex; align-items: center; gap: 4px; }
.legend i { display: block; width: 6px; height: 6px; border-radius: 50%; }
.legend-green { background: #22c55e; }
.legend-bar { border-radius: 1px !important; background: rgba(34,197,94,.5); }
.legend-dash { width: 8px !important; height: 1px !important; border-radius: 0 !important; background: repeating-linear-gradient(90deg,var(--app-ink-2) 0 2px,transparent 2px 4px); }
.balance-chart { height: 174px; margin-top: 4px; }
.balance-chart svg { width: 100%; height: 100%; overflow: visible; }
.grid-lines path { stroke: var(--app-line); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.axis-labels text { fill: var(--app-ink-2); font-size: 8px; font-family: "Mona Sans"; }
.pnl-bars rect { fill: rgba(34,197,94,.48); }
.pnl-bars rect:nth-child(6), .pnl-bars rect:nth-child(8), .pnl-bars rect:nth-child(11) { fill: rgba(240,92,92,.6); }
.previous-line { fill: none; stroke: var(--app-ink-2); stroke-width: 1; stroke-dasharray: 4 5; opacity: .42; vector-effect: non-scaling-stroke; }
.balance-area { fill: url(#balanceAreaDark); }
.balance-line { fill: none; stroke: #24cf68; stroke-width: 2.4; filter: url(#chartGlow); vector-effect: non-scaling-stroke; }
.balance-points circle { fill: #48e485; stroke: var(--app-panel); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.balance-points circle:last-child { fill: var(--app-panel); stroke: #24cf68; stroke-width: 2.2; }
.chart-tip rect { fill: color-mix(in srgb,var(--app-panel-2) 94%,transparent); stroke: var(--app-line); }
.chart-tip text { fill: var(--app-ink-2); font: 7px "Mona Sans"; }
.chart-tip text:last-child { fill: var(--app-positive); font-weight: 700; }
.balance-foot { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding-top: 10px; border-top: 1px solid var(--app-line); }
.balance-foot span { min-width: 0; border-right: 1px solid var(--app-line); }
.balance-foot span:last-child { border: 0; }
.balance-foot small { display: block; color: var(--app-ink-2); font-size: 6px; text-transform: uppercase; }
.balance-foot b { display: block; margin-top: 5px; overflow: hidden; color: var(--app-positive); font-size: 10px; text-overflow: ellipsis; }
.balance-foot span:nth-child(2) b { color: var(--app-danger); }
.quick-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.quick-grid article { display: flex; min-height: 88px; flex-direction: column; justify-content: end; padding: 10px; }
.quick-grid article > span { display: grid; width: 25px; height: 25px; place-items: center; margin-bottom: auto; border: 1px solid var(--app-line); border-radius: 7px; color: var(--app-ink-2); }
.quick-grid b { font-size: 8px; }
.quick-grid small { margin-top: 3px; color: var(--app-ink-2); font-size: 6px; }
.dash-lower { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9px; margin-top: 9px; }
.hour-card, .calendar-card { min-width: 0; padding: 12px; }
.hour-card header, .calendar-card header { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.hour-card header > div span { display: block; color: var(--app-ink-2); font-size: 6px; text-transform: uppercase; }
.hour-card header strong { display: block; margin-top: 4px; font-size: 14px; }
.hour-card header > small, .calendar-card header span { color: var(--app-ink-2); font-size: 6px; }
.hour-card svg { width: 100%; height: 54px; margin-top: 4px; }
.hour-band { fill: color-mix(in srgb,#22c55e 8%,transparent); }
.hour-prev { fill: none; stroke: var(--app-ink-2); stroke-width: 1; stroke-dasharray: 4 4; opacity: .55; vector-effect: non-scaling-stroke; }
.hour-live { fill: none; stroke: #17b85a; stroke-width: 2; vector-effect: non-scaling-stroke; }
.hour-card line { stroke: #15a955; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.calendar-card header b { display: block; font-size: 8px; }
.calendar-card header small { display: block; margin-top: 3px; color: var(--app-positive); font-size: 6px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; margin-top: 8px; }
.calendar-grid i { display: flex; min-width: 0; min-height: 29px; flex-direction: column; justify-content: space-between; padding: 4px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--app-panel-2); font-style: normal; }
.calendar-grid small { color: var(--app-ink-2); font-size: 5px; }
.calendar-grid b { overflow: hidden; font-size: 6px; text-overflow: ellipsis; }
.calendar-grid i.good { border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.09); color: var(--app-positive); }
.calendar-grid i.today { border-color: #1ecb65; }

.module-head p { color: var(--app-positive); font-size: 7px; text-transform: uppercase; letter-spacing: .12em; }
.module-head > span, .module-head > button { padding: 7px 9px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-panel); color: var(--app-ink-2); }
.module-head > button { border-color: rgba(34,197,94,.28); background: #22bd60; color: #06180d; font-size: 7px; }
.pos-layout, .crm-layout { display: grid; min-height: 500px; grid-template-columns: 1.4fr .6fr; gap: 10px; }
.table-map, .order-card, .crm-list, .automation-card { padding: 14px; }
.map-toolbar, .crm-list header, .automation-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 8px; }
.map-toolbar div { display: flex; gap: 4px; }
.map-toolbar span, .crm-list header span { padding: 5px 8px; border-radius: 999px; color: var(--app-ink-2); }
.map-toolbar span.on { background: var(--app-panel-2); color: var(--app-ink); }
.tables { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; align-items: center; margin: 48px 22px; }
.tables button { aspect-ratio: 1.25; border: 1px solid var(--app-line); border-radius: 50%; background: var(--app-panel-2); color: var(--app-ink); font-size: 12px; }
.tables button small { display: block; margin-top: 4px; color: var(--app-ink-2); font-size: 6px; }
.tables button.occupied { border-color: rgba(34,197,94,.24); background: rgba(34,197,94,.08); }
.tables button.selected { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.08); }
.order-card { display: flex; flex-direction: column; }
.order-card header { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--app-line); }
.order-card header b, .order-card header small { display: block; font-size: 8px; }
.order-card header small { margin-top: 3px; color: var(--app-ink-2); font-size: 6px; }
.order-line { display: flex; justify-content: space-between; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--app-line); font-size: 8px; }
.order-line span b { margin-right: 4px; color: var(--app-ink-2); }
.order-total { display: flex; justify-content: space-between; margin-top: auto; padding: 16px 0; font-size: 10px; }
.order-card > button { min-height: 38px; border: 0; border-radius: 8px; background: #20bd60; color: #06180d; font-size: 8px; font-weight: 750; }
.crm-layout { grid-template-columns: .8fr 1.2fr; }
.client-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; margin-top: 8px; padding: 10px; border: 1px solid transparent; border-radius: 8px; }
.client-row.active { border-color: rgba(34,197,94,.2); background: rgba(34,197,94,.06); }
.client-row > i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: var(--app-panel-2); color: var(--app-positive); font-size: 7px; font-style: normal; }
.client-row b, .client-row small { display: block; font-size: 7px; }
.client-row small { margin-top: 3px; color: var(--app-ink-2); font-size: 6px; }
.client-row em { color: var(--app-positive); font-size: 6px; }
.automation-card header span, .automation-card header b { display: block; }
.automation-card header span { color: var(--app-ink-2); font-size: 6px; }
.automation-card header b { margin-top: 4px; font-size: 11px; }
.automation-card header > i { padding: 5px 7px; border-radius: 999px; background: rgba(34,197,94,.08); color: var(--app-positive); font-size: 6px; font-style: normal; }
.automation-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 7px; margin-top: 38px; }
.automation-flow span { display: grid; min-height: 78px; place-items: center; padding: 9px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-panel-2); text-align: center; font-size: 7px; }
.automation-flow b { color: var(--app-positive); }
.channel-line { display: flex; align-items: center; justify-content: space-between; margin-top: 46px; padding-top: 14px; border-top: 1px solid var(--app-line); color: var(--app-ink-2); font-size: 7px; }
.channel-line div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.channel-line i { padding: 5px 7px; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-ink); font-style: normal; }
.automation-card > small { display: block; margin-top: 12px; color: var(--app-ink-2); font-size: 6px; }
.agenda-layout { display: grid; min-height: 492px; grid-template-columns: 46px repeat(3,1fr); border: 1px solid var(--app-line); border-radius: 11px; background: var(--app-panel); box-shadow: var(--app-shadow); }
.agenda-hours { display: grid; grid-template-rows: 36px repeat(7,1fr); padding-top: 36px; border-right: 1px solid var(--app-line); color: var(--app-ink-2); font-size: 6px; text-align: center; }
.agenda-column { position: relative; display: grid; grid-template-rows: 36px repeat(7,1fr); border-right: 1px solid var(--app-line); background: repeating-linear-gradient(180deg,transparent 0 calc((100% - 36px)/7 - 1px),var(--app-line) calc((100% - 36px)/7)); }
.agenda-column:last-child { border: 0; }
.agenda-column header { z-index: 2; padding: 10px; border-bottom: 1px solid var(--app-line); background: var(--app-panel); }
.agenda-column header b, .agenda-column header small { display: block; font-size: 7px; }
.agenda-column header small { color: var(--app-ink-2); font-size: 5px; }
.agenda-column article { z-index: 1; grid-row: calc(var(--start) + 1) / span var(--span); align-self: stretch; margin: 3px 5px; padding: 8px; border: 1px solid rgba(34,197,94,.23); border-radius: 7px; background: color-mix(in srgb,#22c55e 9%,var(--app-panel)); }
.agenda-column article b, .agenda-column article small, .agenda-column article em { display: block; font-size: 7px; }
.agenda-column article small { margin-top: 3px; color: var(--app-ink-2); font-size: 6px; }
.agenda-column article em { margin-top: 7px; color: var(--app-positive); font-size: 5px; }
.device-stage[data-device-stage="tablet"] { min-height: 750px; }
.device-stage[data-device-stage="tablet"] .device-shell { width: 760px; border-radius: 28px; }
.device-stage[data-device-stage="tablet"] .device-base { opacity: 0; transform: scaleX(.72); }
.device-stage[data-device-stage="mobile"] { min-height: 740px; }
.device-stage[data-device-stage="mobile"] .device-shell { width: 385px; border-radius: 38px; }
.device-stage[data-device-stage="mobile"] .device-base { opacity: 0; transform: scaleX(.5); }
.device-stage[data-device-stage="mobile"] .app-window { grid-template-columns: 42px minmax(0,1fr); }
.device-stage[data-device-stage="mobile"] .app-logo span, .device-stage[data-device-stage="mobile"] .app-sidebar nav span, .device-stage[data-device-stage="mobile"] .app-sidebar > small { display: none; }
.device-stage[data-device-stage="mobile"] .app-sidebar { padding-inline: 5px; }
.device-stage[data-device-stage="mobile"] .app-sidebar nav i { justify-content: center; padding-inline: 4px; }
.device-stage[data-device-stage="mobile"] .app-topbar .demo-label, .device-stage[data-device-stage="mobile"] .date-pills span:first-child, .device-stage[data-device-stage="mobile"] .kpi-row article:nth-child(n+3), .device-stage[data-device-stage="mobile"] .quick-grid, .device-stage[data-device-stage="mobile"] .dash-lower { display: none; }
.device-stage[data-device-stage="mobile"] .app-panel { padding: 11px; }
.device-stage[data-device-stage="mobile"] .kpi-row { grid-template-columns: repeat(2,1fr); }
.device-stage[data-device-stage="mobile"] .dash-main, .device-stage[data-device-stage="mobile"] .pos-layout, .device-stage[data-device-stage="mobile"] .crm-layout { grid-template-columns: 1fr; }
.device-stage[data-device-stage="mobile"] .balance-chart { height: 280px; }
.device-stage[data-device-stage="mobile"] .balance-foot { grid-template-columns: repeat(2,1fr); }
.device-stage[data-device-stage="mobile"] .order-card, .device-stage[data-device-stage="mobile"] .automation-card { display: none; }
.device-stage[data-device-stage="mobile"] .tables { margin: 28px 6px; gap: 9px; }
.device-stage[data-device-stage="mobile"] .agenda-layout { grid-template-columns: 35px 1fr; }
.device-stage[data-device-stage="mobile"] .agenda-column:nth-child(n+3) { display: none; }
.product-caption { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; color: var(--ink-2); font-size: 13px; }
.product-caption p span { margin-right: 10px; color: var(--green); font-weight: 680; }
.product-caption a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); font-weight: 650; }

.flow-bento { display: grid; grid-template-columns: 1.18fr .82fr; grid-template-rows: repeat(2,330px); gap: 16px; }
.flow-card { position: relative; display: grid; min-width: 0; overflow: hidden; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012)); }
.flow-primary { grid-row: span 2; }
.flow-copy { position: relative; z-index: 2; max-width: 450px; }
.flow-copy > span { color: var(--green); font-size: 11px; font-weight: 720; letter-spacing: .12em; text-transform: uppercase; }
.flow-copy h3 { margin-top: 14px; font-size: clamp(26px,3vw,42px); letter-spacing: -.04em; line-height: 1.02; }
.flow-copy p { margin-top: 14px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.sale-receipt { position: absolute; right: -20px; bottom: -55px; width: 390px; padding: 20px; border: 1px solid var(--line-strong); border-radius: 22px; background: #121615; box-shadow: 0 25px 70px rgba(0,0,0,.4); transform: rotate(-4deg); }
.sale-receipt header { display: flex; align-items: center; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 12px; }
.sale-receipt header span { margin-left: auto; color: var(--ink-3); }
.sale-receipt > div, .sale-receipt footer { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 12px; }
.sale-receipt footer { color: var(--ink); }
.sale-receipt footer strong { font-size: 18px; }
.sale-receipt button { width: 100%; min-height: 44px; margin-top: 18px; border: 0; border-radius: 12px; background: var(--green); color: #041007; font-weight: 750; }
.stock-list, .close-summary { align-self: end; margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(0,0,0,.16); }
.stock-list span, .close-summary span { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.stock-list i, .close-summary i { color: var(--ink-2); font-style: normal; }
.stock-list small, .close-summary > strong { display: block; margin-top: 13px; color: var(--green); font-size: 10px; font-weight: 650; }
.positive { color: var(--green); }

.industries { background: linear-gradient(180deg,transparent,rgba(255,255,255,.012),transparent); }
.industry-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.industry-tabs button { min-width: 108px; padding: 0 17px; border: 1px solid var(--line); }
.industry-stage { position: relative; display: grid; min-height: 560px; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: var(--panel); }
.industry-stage > figure { position: relative; min-height: 560px; overflow: hidden; }
.industry-stage > figure img { width: 100%; height: 100%; object-fit: cover; transition: opacity 200ms ease, transform 520ms var(--ease-out); }
.industry-stage.is-changing > figure img { opacity: .32; transform: scale(1.015); }
.industry-copy { align-self: center; padding: 62px; }
.industry-copy h3 { max-width: 510px; margin-top: 18px; font-size: clamp(34px,4vw,54px); letter-spacing: -.05em; line-height: 1.01; }
.industry-copy > p:not(.eyebrow) { max-width: 490px; margin-top: 20px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.industry-stat { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 45px; padding-top: 20px; border-top: 1px solid var(--line); }
.industry-stat strong, .industry-stat span { display: block; }
.industry-stat strong { font-size: 20px; }
.industry-stat div span { margin-top: 4px; color: var(--ink-3); font-size: 11px; }
.industry-stat > span { padding: 8px 11px; border: 1px solid var(--green-line); border-radius: 999px; color: var(--green); font-size: 10px; }
.industry-preview { position: absolute; bottom: 24px; left: 24px; width: 300px; padding: 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: rgba(9,12,11,.81); box-shadow: 0 18px 45px rgba(0,0,0,.35); backdrop-filter: blur(18px); }
.industry-preview header { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 9px; }
.industry-preview header b { color: var(--ink); }
.preview-tables { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 13px; }
.preview-tables i { display: grid; min-height: 54px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); font-size: 10px; font-style: normal; }
.preview-tables i small { display: block; color: var(--ink-3); font-size: 7px; }
.preview-tables i.busy { border-color: var(--green-line); background: var(--green-soft); }

.relationships { overflow: hidden; }
.relationship-aura { top: 16%; right: 5%; width: 42%; height: 55%; background: radial-gradient(circle,rgba(19,64,255,.10),rgba(0,255,81,.06) 38%,transparent 68%); }
.relationship-grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr .82fr; gap: 16px; }
.relationship-card { min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.relationship-card > header { display: flex; min-height: 69px; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.relationship-card header span { color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.relationship-card header h3 { margin-top: 7px; font-size: 20px; }
.relationship-card header > i { color: var(--ink-3); font-size: 10px; font-style: normal; }
.profile-card { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; margin-top: 22px; }
.avatar { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 750; }
.profile-card b, .profile-card small { display: block; }
.profile-card b { font-size: 13px; }
.profile-card small { margin-top: 3px; color: var(--ink-3); font-size: 10px; }
.profile-card em { padding: 6px 8px; border-radius: 999px; background: var(--green-soft); font-size: 9px; }
.customer-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 22px; }
.customer-metrics span { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.13); }
.customer-metrics small, .customer-metrics b { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.customer-metrics small { color: var(--ink-3); }
.customer-metrics b { margin-top: 6px; font-size: 11px; }
.automation-preview { margin-top: 22px; padding: 15px; border: 1px solid var(--green-line); border-radius: 13px; background: var(--green-soft); }
.automation-preview > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.automation-preview span { color: var(--ink-2); }
.automation-path { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.automation-path i { padding: 7px 9px; border-radius: 8px; background: rgba(0,0,0,.21); color: var(--ink-2); font-size: 8px; font-style: normal; }
.automation-path b { color: var(--green); }
.julieta-preview > header { justify-content: start; }
.julieta-mark { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: var(--green); color: #06150b; }
.julieta-preview header > i { margin-left: auto; }
.chat-bubble { max-width: 90%; margin-top: 18px; padding: 12px 14px; border-radius: 14px; font-size: 11px; line-height: 1.45; }
.chat-bubble.user { margin-left: auto; border-bottom-right-radius: 5px; background: #f1f3f1; color: #111413; }
.chat-bubble.assistant { border: 1px solid var(--line); border-bottom-left-radius: 5px; background: rgba(255,255,255,.035); color: var(--ink-2); }
.insight-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; margin-top: 17px; padding: 13px; border: 1px solid var(--green-line); border-radius: 13px; background: var(--green-soft); }
.insight-card span { grid-column: 1/-1; color: var(--green); font-size: 8px; text-transform: uppercase; }
.insight-card b { font-size: 10px; }
.insight-card button { min-height: 44px; padding: 0 12px; border: 1px solid var(--green-line); border-radius: 9px; background: transparent; color: var(--green); cursor: pointer; font-size: 8px; }
.alert-feedback { min-height: 16px; margin-top: 8px; color: var(--green); font-size: 9px; }
.channels-preview { padding-inline: 22px; }
.channel-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.channel-item > i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--green); font-style: normal; }
.channel-item b, .channel-item small { display: block; }
.channel-item b { font-size: 11px; }
.channel-item small { margin-top: 3px; color: var(--ink-3); font-size: 8px; }
.channel-item > span { color: var(--ink-3); font-size: 7px; }
.channels-preview > p { margin-top: 16px; color: var(--ink-3); font-size: 9px; line-height: 1.45; }

.pricing { background: linear-gradient(180deg,transparent,rgba(0,255,81,.022),transparent); }
.billing-toggle { margin-top: 30px; }
.billing-toggle button { padding: 0 16px; }
.billing-toggle button span { margin-left: 5px; color: #00ad39; font-size: 9px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); align-items: stretch; gap: 16px; }
.plan-card { position: relative; display: flex; min-height: 535px; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.018); transition: transform 220ms var(--ease-out), border-color 220ms ease, background-color 220ms ease; }
.plan-featured { border-color: rgba(255,255,255,.22); background: linear-gradient(150deg,rgba(255,255,255,.065),rgba(0,255,81,.025)); box-shadow: 0 30px 75px rgba(0,0,0,.25); }
.plan-ribbon { position: absolute; top: 22px; right: 22px; padding: 6px 9px; border-radius: 999px; background: var(--green); color: #06150a; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.plan-name { display: block; font-size: 26px; font-weight: 710; letter-spacing: -.035em; }
.plan-card > div:first-of-type p, .plan-card > div:nth-of-type(2) p { margin-top: 9px; color: var(--ink-2); font-size: 13px; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin-top: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.plan-price strong { font-size: clamp(32px,3vw,45px); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.plan-price span { color: var(--ink-3); font-size: 11px; }
.plan-card ul { display: grid; gap: 14px; margin: 28px 0 32px; padding: 0; list-style: none; color: var(--ink-2); font-size: 12px; }
.plan-card li { position: relative; padding-left: 21px; }
.plan-card li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-size: 10px; }
.plan-card .button { margin-top: auto; }
.pricing-note { margin-top: 22px; color: var(--ink-3); font-size: 11px; text-align: center; }

.faq { padding-bottom: 80px; }
.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; }
.faq-heading { position: sticky; top: 120px; align-self: start; }
.faq-heading a { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; margin-top: 28px; color: var(--ink-2); font-size: 13px; font-weight: 630; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; font-size: 17px; font-weight: 640; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); transition: transform 180ms var(--ease-out), color 180ms ease, border-color 180ms ease; }
.faq-list details[open] summary span { border-color: var(--green-line); color: var(--green); transform: rotate(45deg); }
.faq-list details p { max-width: 680px; padding: 0 55px 26px 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }

.final-cta { padding-top: 80px; }
.final-card { position: relative; overflow: hidden; padding: 90px 32px; border: 1px solid var(--line); border-radius: 32px; background: linear-gradient(145deg,#101513,#0a0c0b); text-align: center; }
.final-aura { position: absolute; top: -90%; left: 15%; width: 70%; height: 150%; border-radius: 50%; background: radial-gradient(circle,rgba(0,255,81,.14),rgba(11,67,255,.07) 38%,transparent 70%); }
.final-card > *:not(.final-aura) { position: relative; }
.final-card > img { margin: 0 auto 26px; }
.final-card h2 { font-size: clamp(42px,5vw,68px); }
.final-card > p:not(.eyebrow) { max-width: 610px; margin: 24px auto 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.final-card .hero-actions { justify-content: center; }
.final-card > small { display: block; margin-top: 17px; color: var(--ink-3); }
.site-footer { padding: 40px 0 48px; }
.footer-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding-top: 32px; border-top: 1px solid var(--line); }
.footer-grid > p { color: var(--ink-3); font-size: 12px; }
.footer-grid nav { display: flex; gap: 25px; color: var(--ink-2); font-size: 12px; }
.footer-grid nav a { display: inline-flex; min-height: 44px; align-items: center; }
.footer-grid > small { grid-column: 1/-1; color: var(--ink-3); font-size: 10px; }

.js .reveal { opacity: 0; transform: translate3d(0,28px,0); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.js .reveal[data-delay="1"] { transition-delay: 70ms; }
.js .reveal[data-delay="2"] { transition-delay: 140ms; }
.js .reveal.is-visible { opacity: 1; transform: translate3d(0,0,0); }

@keyframes omni-hero-aura {
  from { transform: translate3d(-2%, -1%, 0); opacity: .68; }
  to { transform: translate3d(2%, 2%, 0); opacity: .92; }
}
@keyframes omni-hero-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -8px, 0); }
}
.approved-landing-shell[data-motion="full"] .hero-aura { animation: omni-hero-aura 11s ease-in-out infinite alternate; }
.approved-landing-shell[data-motion="full"] .hero-media { animation: omni-hero-float 7s ease-in-out infinite alternate; }
.approved-landing-shell[data-motion="full"] .hero-ticket { animation: omni-hero-float 5.5s ease-in-out 180ms infinite alternate-reverse; }

@media (hover:hover) and (pointer:fine) {
  .desktop-nav a:hover, .nav-demo:hover, .product-caption a:hover, .faq-heading a:hover { color: var(--ink); }
  .desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .button:hover { transform: translateY(-2px); }
  .button:active { transform: scale(.97); }
  .evolution-card:hover, .plan-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
  .industry-tabs button:hover, .product-tabs button:hover, .device-tabs button:hover, .theme-toggle:hover, .billing-toggle button:hover { color: var(--ink); }
}

@media (max-width: 1040px) {
  .hero { min-height: 760px; }
  .hero-grid { gap: 36px; }
  .hero h1 { font-size: clamp(50px,6.2vw,68px); }
  .section { padding-block: 92px; }
  .app-window { grid-template-columns: 55px minmax(0,1fr); }
  .app-logo span, .app-sidebar nav span, .app-sidebar > small { display: none; }
  .app-sidebar { padding-inline: 7px; }
  .app-sidebar nav i { justify-content: center; }
  .relationship-grid { grid-template-columns: 1fr 1fr; }
  .channels-preview { grid-column: 1/-1; }
  .channels-preview .channel-item { display: inline-grid; width: calc(33.333% - 10px); margin-right: 10px; vertical-align: top; }
  .industry-copy { padding: 42px; }
  .device-stage[data-device-stage="tablet"] .device-shell { width: 74%; }
}

@media (max-width: 780px) {
  :root { --header: 68px; }
  .shell { width: min(100% - 32px,1280px); }
  .section { padding: 78px 0; }
  .section-intro { margin-bottom: 34px; }
  .section-intro.split { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .section-intro h2, .faq-heading h2, .final-card h2 { font-size: clamp(38px,10.5vw,54px); }
  .section-intro > p:last-child, .section-intro.split > p { font-size: 16px; }
  .desktop-nav, .nav-demo, .nav-actions > .button { display: none; }
  .nav-actions { margin-left: auto; }
  .menu-toggle { display: block; }
  .mobile-menu {
    position: absolute;
    top: 68px;
    right: 16px;
    left: 16px;
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(14,16,16,.97);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0,-8px,0) scale(.98);
    transform-origin: top right;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  }
  .mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: translate3d(0,0,0) scale(1); }
  .mobile-menu > a:not(.button) { min-height: 46px; padding: 13px 12px; border-radius: 10px; color: var(--ink-2); font-size: 14px; }
  .mobile-menu .button { margin-top: 4px; }
  .hero { min-height: auto; padding-top: 124px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(50px,13.5vw,72px); }
  .hero-lead { font-size: 18px; }
  .hero-media { margin-top: 18px; padding-bottom: 42px; }
  .hero-photo { border-radius: 22px; }
  .hero-status { right: 12px; bottom: 4px; width: 230px; }
  .hero-ticket { left: 12px; bottom: 74px; }
  .hero-proof { flex-wrap: wrap; justify-content: flex-start; margin-top: 44px; }
  .hero-proof span { width: calc(33.333% - 12px); }
  .evolution { padding-top: 105px; }
  .evolution-rail { grid-template-columns: 1fr; }
  .evolution-card { min-height: 400px; }
  .product-toolbar { align-items: stretch; flex-direction: column; }
  .product-tabs { display: grid; grid-template-columns: repeat(4,1fr); }
  .product-tabs button, .device-tabs button, .theme-toggle, .industry-tabs button, .billing-toggle button { min-height: 44px; }
  .product-tabs button { padding-inline: 8px; font-size: 11px; }
  .view-controls { justify-content: space-between; }
  .device-tabs button span, .theme-toggle span:last-child { display: none; }
  .device-stage, .device-stage[data-device-stage="tablet"], .device-stage[data-device-stage="mobile"] { min-height: 650px; }
  .device-shell, .device-stage[data-device-stage="tablet"] .device-shell, .device-stage[data-device-stage="mobile"] .device-shell { width: 100%; padding: 7px; border-radius: 25px; }
  .device-base { opacity: 0; }
  .app-window, .device-stage[data-device-stage="mobile"] .app-window { height: 620px; grid-template-columns: 40px minmax(0,1fr); border-radius: 18px; }
  .app-panel { padding: 10px; }
  .app-topbar { padding-inline: 10px; }
  .app-topbar .demo-label, .app-topbar button, .date-pills span:first-child { display: none; }
  .kpi-row { grid-template-columns: repeat(2,1fr); }
  .kpi-row article:nth-child(n+3) { display: none; }
  .dash-main { grid-template-columns: 1fr; }
  .quick-grid { display: none; }
  .balance-chart { height: 250px; }
  .dash-lower { grid-template-columns: 1fr; }
  .calendar-card { display: none; }
  .pos-layout, .crm-layout { grid-template-columns: 1fr; min-height: auto; }
  .order-card, .automation-card { display: none; }
  .tables { margin: 26px 4px; gap: 9px; }
  .agenda-layout { grid-template-columns: 35px 1fr; }
  .agenda-column:nth-child(n+3) { display: none; }
  .product-caption { align-items: start; flex-direction: column; }
  .flow-bento { grid-template-columns: 1fr; grid-template-rows: 560px 330px 330px; }
  .flow-primary { grid-row: auto; }
  .sale-receipt { right: -30px; width: 350px; }
  .industry-tabs { justify-content: flex-start; }
  .industry-tabs button { min-width: 0; padding-inline: 13px; }
  .industry-stage { grid-template-columns: 1fr; }
  .industry-stage > figure { min-height: 400px; }
  .industry-copy { padding: 38px 28px; }
  .industry-preview { bottom: auto; top: 220px; left: 28px; }
  .relationship-grid { grid-template-columns: 1fr; }
  .channels-preview { grid-column: auto; }
  .channels-preview .channel-item { display: grid; width: 100%; margin: 0; }
  .pricing-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: 490px; }
  .faq-grid { grid-template-columns: 1fr; gap: 48px; }
  .faq-heading { position: static; }
  .final-card { padding: 72px 22px; }
  .footer-grid { grid-template-columns: 1fr auto; }
  .footer-grid > p { grid-column: 1/-1; }
}

@media (prefers-reduced-motion: reduce) {
  .approved-landing-shell[data-motion="system"] .hero-aura,
  .approved-landing-shell[data-motion="system"] .hero-media,
  .approved-landing-shell[data-motion="system"] .hero-ticket { animation: none; }
}

@media (max-width: 480px) {
  .shell { width: min(100% - 24px,1280px); }
  .section { padding: 68px 0; }
  .hero { padding-top: 112px; }
  .hero h1 { font-size: 48px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-status { right: 8px; bottom: 4px; width: 206px; padding: 14px; }
  .hero-ticket { bottom: 66px; left: 8px; min-width: 185px; }
  .hero-proof span { width: calc(50% - 9px); }
  .evolution-card { min-height: 372px; padding: 18px; }
  .evolution-card h3 { font-size: 21px; }
  .paper-lines { inset: 22px; gap: 13px; }
  .product { padding-bottom: 52px; }
  .product-tabs button, .device-tabs button, .theme-toggle, .industry-tabs button, .billing-toggle button { min-height: 44px; }
  .device-tabs button { padding-inline: 10px; }
  .device-stage, .device-stage[data-device-stage="tablet"], .device-stage[data-device-stage="mobile"] { min-height: 610px; }
  .app-window, .device-stage[data-device-stage="mobile"] .app-window { height: 580px; }
  .app-sidebar { display: none; }
  .app-window, .device-stage[data-device-stage="mobile"] .app-window { grid-template-columns: 1fr; }
  .date-pills { display: none; }
  .dash-head h3, .module-head h3 { font-size: 12px; }
  .balance-head { flex-direction: column; }
  .balance-chart { height: 240px; }
  .axis-labels text { font-size: 9px; }
  .balance-foot { grid-template-columns: repeat(2,1fr); }
  .hour-card { display: none; }
  .tables { margin-inline: 0; }
  .flow-bento { grid-template-rows: 530px auto auto; }
  .flow-card { padding: 23px; }
  .sale-receipt { right: -55px; bottom: -35px; width: 340px; transform: rotate(-3deg) scale(.92); }
  .industry-tabs { display: grid; grid-template-columns: repeat(3,1fr); width: 100%; }
  .industry-tabs button { padding-inline: 5px; font-size: 10px; }
  .industry-stage > figure { min-height: 360px; }
  .industry-preview { top: 205px; left: 16px; width: calc(100% - 32px); }
  .industry-copy { padding: 34px 22px; }
  .industry-stat { align-items: start; flex-direction: column; gap: 14px; }
  .customer-metrics { grid-template-columns: 1fr 1fr; }
  .customer-metrics span:last-child { display: none; }
  .relationship-card { padding: 22px; }
  .automation-path { align-items: stretch; flex-direction: column; }
  .automation-path b { transform: rotate(90deg); text-align: center; }
  .billing-toggle button span { display: none; }
  .pricing-grid { display: flex; width: calc(100% + 12px); gap: 12px; overflow-x: auto; padding: 4px 12px 18px 0; scroll-padding-inline: 0 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pricing-grid::-webkit-scrollbar { display: none; }
  .plan-card { width: calc(100vw - 48px); min-height: 500px; flex: 0 0 calc(100vw - 48px); padding: 26px; scroll-snap-align: start; }
  .js .pricing-grid .reveal { opacity: 1; transform: none; transition: none; }
  .plan-card .button { margin-top: 12px; }
  .faq-list summary { min-height: 76px; font-size: 15px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid nav { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .approved-landing-shell .reveal { animation: none !important; }
  .approved-landing-shell .reveal { opacity: 0; transform: translate3d(0,6px,0); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out) !important; }
  .approved-landing-shell .reveal.is-visible { opacity: 1; transform: translate3d(0,0,0); }
  .approved-landing-shell .module-track,
  .approved-landing-shell .ambient-ribbon,
  .approved-landing-shell #ambient-dust { animation: none !important; }
  .button:hover, .evolution-card:hover, .plan-card:hover { transform: none !important; }
  .industry-stage > figure img { transform: none !important; }
}

/* The product owns its viewport; marketing styles never reach its typography. */
.product-viewport{padding:18px 12px 26px;overflow:auto;scrollbar-color:#56615a #101412;border-radius:24px;background:linear-gradient(155deg,#171d1a,#090b0d 70%);border:1px solid #ffffff12;min-height:740px}
.live-device{width:1120px;max-width:100%;min-width:960px;margin:0 auto;background:#202423;padding:8px;border:1px solid #555b58;border-radius:18px;box-shadow:0 24px 65px #0008;transition:width 220ms var(--ease-out),border-radius 220ms var(--ease-out)}
.live-device-chrome{height:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;color:#c8ceca;font:11px system-ui,sans-serif;letter-spacing:normal}.live-camera{width:6px;height:6px;border-radius:50%;background:#050606;box-shadow:0 0 0 2px #424845}
#live-product{width:100%;height:650px;display:block;border:0;border-radius:9px;background:#090d0b}
[data-device-stage=tablet] .live-device{width:768px;min-width:768px;padding:12px;border-radius:26px}
[data-device-stage=mobile] .live-device{width:390px;min-width:0;padding:9px;border-radius:30px}
[data-device-stage=mobile] #live-product{border-radius:20px}
[data-device-stage=mobile] .live-device-chrome{font-size:9px}
.product-toolbar{gap:16px;flex-wrap:wrap}.product-tabs{flex-wrap:wrap}.product-tabs button,.device-tabs button,.theme-toggle{min-height:44px}
.product-caption{gap:14px}.product-caption p{font-size:13px}.product-caption a{min-height:44px;display:inline-flex;align-items:center}
.ambient-scene{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1;background:#08080a;isolation:isolate}body{isolation:isolate;background:transparent}
.ambient-ribbon{position:absolute;width:95vw;height:68vh;left:-36vw;top:4vh;border-radius:50%;background:radial-gradient(ellipse at center,#00ff5140, #00ff5115 34%,transparent 68%);transform:translate3d(0,var(--ambient-y,0px),0) rotate(-32deg);will-change:transform}
.ribbon-b{left:auto;right:-40vw;top:30vh;width:105vw;height:95vh;background:radial-gradient(ellipse,#124dff32, #00ff5120 32%,transparent 66%);transform:translate3d(0,calc(var(--ambient-y,0px) * -.65),0) rotate(35deg)}
#ambient-dust{position:absolute;inset:0;width:100%;height:100%;opacity:.75}
.button{position:relative;isolation:isolate;overflow:hidden;transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.button-light{box-shadow:0 0 0 1px #00ff5166,0 5px 22px #00ff5125}
.button::after{content:"";position:absolute;inset:-60% -80%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#00ff5180 48%,#ffffffaa 50%,transparent 58%);transform:translateX(-65%);transition:transform 550ms var(--ease-out)}
.button>span:last-child{transition:transform 180ms var(--ease-out)}.button:active{transform:translateY(1px)}
.plan-card{isolation:isolate;overflow:hidden;position:relative}.plan-featured{border-color:#00ff5180;background:radial-gradient(ellipse at 85% 0%,#00ff5125,transparent 48%),#101412;box-shadow:0 0 60px #00ff5112}
.plan-featured::after{content:"";position:absolute;pointer-events:none;top:0;left:5%;width:75%;height:1px;background:linear-gradient(90deg,transparent,#00ff51,#fff,#00ff51,transparent);box-shadow:0 0 18px 3px #00ff5155;transform:translateX(var(--plan-light,0%))}
.plan-featured::before{content:"";pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at var(--shine-x,75%) var(--shine-y,10%),#00ff511b,transparent 55%);z-index:-1}
@media(hover:hover) and (pointer:fine){.button:hover,.button:focus-visible{transform:translateY(-2px);box-shadow:0 5px 30px #00ff5140}.button:hover::after,.button:focus-visible::after{transform:translateX(65%)}.button:hover>span:last-child{transform:translate(2px,-2px)}.plan-card:hover{border-color:#00ff5170}}
@media(max-width:600px){.product-viewport{padding:12px 5px;min-height:720px}.live-device{margin:0}.live-device-chrome{padding:0 6px}.product-toolbar{align-items:start}.view-controls{width:100%;justify-content:space-between}.product-tabs{gap:2px}.product-tabs button{padding:10px 12px}.product-caption{flex-direction:column;align-items:start}.product-caption p{max-width:30ch}.ambient-ribbon{width:155vw;left:-90vw}.ribbon-b{left:auto;right:-100vw;width:180vw}.sale-receipt{transform:rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.ambient-ribbon{transform:none;will-change:auto}#ambient-dust{display:none}.button::after{display:none}.live-device,.button,.button>span:last-child{transition:none}.plan-featured::after{transform:none}}

.sale-receipt .receipt-action{display:flex;align-items:center;justify-content:center;min-height:44px;background:#e4f3e8;color:#101a13;border-radius:8px;font-size:12px;font-weight:650;margin-top:12px}.sale-receipt .receipt-action:focus-visible{outline:2px solid #00ff51;outline-offset:4px}.product-caption p{max-width:68ch;color:var(--ink-2)}
@media(max-width:600px){.device-tabs button span{display:inline;font-size:11px}.device-tabs button{min-width:70px;padding:8px}.product-tabs{border-radius:18px}.product-tabs button{font-size:12px}.product-section .section-intro{margin-bottom:28px}.product-viewport.reveal{opacity:1;transform:none;filter:none}}
h1{letter-spacing:-.055em}h2{letter-spacing:-.045em}.plan-price strong{letter-spacing:-.035em;font-variant-numeric:tabular-nums}.relationship-card .chat-bubble{font-size:14px;line-height:1.6}.plan-price>span{color:#a7adae}
/* Language and contact controls share the same restrained product-like grammar. */
.language-picker{position:relative;flex:0 0 auto}.language-picker-trigger{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:72px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#111416cc;color:var(--ink-2);font:650 12px/1 "Mona Sans",sans-serif;letter-spacing:.04em;cursor:pointer;transition:color 180ms var(--ease-out),border-color 180ms var(--ease-out),background 180ms var(--ease-out)}.language-picker-trigger:hover,.language-picker-trigger:focus-visible,.language-picker.is-open .language-picker-trigger{color:var(--ink);border-color:#ffffff30;background:#171b1d}.language-picker-trigger:focus-visible,.language-picker-menu button:focus-visible{outline:2px solid #00ff51;outline-offset:3px}.language-picker-chevron{transition:transform 180ms var(--ease-out)}.language-picker.is-open .language-picker-chevron{transform:rotate(180deg)}.language-picker-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:90;width:194px;padding:7px;border:1px solid #ffffff1f;border-radius:16px;background:#111416f5;box-shadow:0 24px 65px #000a;backdrop-filter:blur(20px)}.language-picker-menu[hidden]{display:none}.language-picker-menu button{display:grid;grid-template-columns:30px 1fr 13px;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);text-align:left;cursor:pointer;transition:background 180ms var(--ease-out),color 180ms var(--ease-out)}.language-picker-menu button:hover,.language-picker-menu button[aria-selected=true]{background:#ffffff0c;color:var(--ink)}.language-picker-menu button>span{font:700 10px/1 "Mona Sans",sans-serif;letter-spacing:.09em;color:var(--ink-3)}.language-picker-menu button>strong{font:600 13px/1.2 "Mona Sans",sans-serif}.language-picker-menu button>i{width:7px;height:7px;border-radius:50%;background:#00ff51;box-shadow:0 0 12px #00ff5188;opacity:0}.language-picker-menu button[aria-selected=true]>i{opacity:1}.language-picker-standalone{position:fixed;z-index:120;top:18px;right:18px}.language-picker-standalone .language-picker-trigger{background:#111416ee}

.whatsapp-assistant{position:fixed;right:24px;bottom:84px;z-index:79;font-family:"Mona Sans",sans-serif}.whatsapp-contact{display:flex;align-items:center;gap:12px;min-height:56px;padding:0;border:0;border-radius:30px;background:transparent;color:#092414;cursor:pointer;transition:transform 200ms var(--ease-out)}.whatsapp-contact-label{padding:10px 15px;border:1px solid #ffffff75;border-radius:14px;background:#f0f6f1;box-shadow:0 8px 30px #0005;color:#43594a;font-size:10px;line-height:1.45;text-align:right}.whatsapp-contact-label strong{display:block;color:#142e1e;font-size:13px;font-weight:700}.whatsapp-contact-icon{position:relative;display:grid;place-items:center;isolation:isolate;flex:0 0 58px;width:58px;height:58px;border:1px solid #96f2b8;border-radius:50%;background:#25d366;color:#052a14;box-shadow:0 8px 30px #0007}.whatsapp-contact-icon::before{content:"";position:absolute;inset:-7px;border:1px solid #68f69b99;border-radius:50%;pointer-events:none;animation:whatsapp-intro-halo 1500ms ease-out 3 forwards}.whatsapp-contact-icon>i{position:absolute;top:1px;right:1px;width:11px;height:11px;border:2px solid #0b0e0c;border-radius:50%;background:#f5f5f5;box-shadow:0 0 0 2px #25d366}.whatsapp-contact-icon svg{transition:transform 200ms var(--ease-out)}.whatsapp-contact:focus-visible{outline:2px solid #f1fff5;outline-offset:6px}.whatsapp-panel{position:absolute;right:0;bottom:72px;width:min(360px,calc(100vw - 32px));padding:0 18px 16px;overflow:hidden;border:1px solid #ffffff1c;border-radius:22px;background:linear-gradient(160deg,#171b19f8,#0e1110f8);box-shadow:0 28px 80px #000c;backdrop-filter:blur(24px);transform-origin:bottom right;animation:whatsapp-panel-in 220ms var(--ease-out)}.whatsapp-panel[hidden]{display:none}.whatsapp-panel::before{content:"";position:absolute;inset:0 0 auto;height:84px;background:radial-gradient(circle at 15% 0,#25d36625,transparent 70%);pointer-events:none}.whatsapp-panel header{position:relative;display:grid;grid-template-columns:42px 1fr 38px;align-items:center;gap:10px;margin:0 -18px 15px;padding:16px 14px;border-bottom:1px solid #ffffff12}.whatsapp-panel-mark{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#25d366;color:#062a15}.whatsapp-panel-mark svg{width:22px}.whatsapp-panel-mark i{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border:2px solid #151917;border-radius:50%;background:#f5f5f5}.whatsapp-panel header small{display:block;margin-bottom:3px;color:#75d99a;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.whatsapp-panel header strong{display:block;color:var(--ink);font-size:14px}.whatsapp-panel header button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff12;border-radius:11px;background:#ffffff08;color:var(--ink-2);font-size:23px;cursor:pointer}.whatsapp-panel>p{position:relative;margin:0 0 13px;color:var(--ink-2);font-size:12px;line-height:1.55}.whatsapp-prompts{display:grid;gap:7px}.whatsapp-prompts button{display:grid;grid-template-columns:26px 1fr 16px;align-items:center;gap:9px;width:100%;min-height:48px;padding:8px 10px;border:1px solid #ffffff10;border-radius:12px;background:#ffffff06;color:var(--ink-2);font:550 12px/1.35 "Mona Sans",sans-serif;text-align:left;cursor:pointer;transition:border-color 180ms var(--ease-out),background 180ms var(--ease-out),color 180ms var(--ease-out),transform 180ms var(--ease-out)}.whatsapp-prompts button>span{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#ffffff09;color:var(--ink-3);font-size:10px}.whatsapp-prompts button>i{font-style:normal;color:#00ff51;opacity:.5}.whatsapp-prompts button:hover,.whatsapp-prompts button:focus-visible,.whatsapp-prompts button[aria-checked=true]{border-color:#25d36655;background:#25d3660c;color:var(--ink)}.whatsapp-prompts button[aria-checked=true]>span{background:#25d366;color:#062a15;font-weight:800}.whatsapp-prompts button:focus-visible,.whatsapp-panel header button:focus-visible,.whatsapp-continue:focus-visible{outline:2px solid #00ff51;outline-offset:3px}.whatsapp-continue{display:grid;grid-template-columns:22px 1fr 14px;align-items:center;gap:9px;min-height:50px;margin-top:13px;padding:0 14px;border-radius:13px;background:#25d366;color:#062a15;text-decoration:none;font-size:12px;font-weight:750;transition:transform 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}.whatsapp-continue svg{width:20px}.whatsapp-continue i{font-style:normal}.whatsapp-privacy{display:block;margin-top:9px;color:var(--ink-3);font-size:9px;text-align:center}@keyframes whatsapp-intro-halo{from{opacity:.65;transform:scale(.9)}to{opacity:0;transform:scale(1.22)}}@keyframes whatsapp-panel-in{from{opacity:0;transform:translate3d(0,10px,0) scale(.97)}to{opacity:1;transform:none}}@media(hover:hover) and (pointer:fine){.whatsapp-contact:hover{transform:translateY(-2px)}.whatsapp-contact:hover svg{transform:rotate(-8deg)}.whatsapp-continue:hover{transform:translateY(-2px);box-shadow:0 10px 28px #25d36632}.whatsapp-prompts button:hover{transform:translateX(2px)}}
@media(max-width:780px){.language-picker-trigger{min-width:62px;padding-inline:9px}.language-picker-menu{right:-48px}.nav-actions .language-picker{margin-right:4px}}
@media(max-width:650px){.whatsapp-assistant{right:16px;bottom:78px}.whatsapp-contact-label{display:none}.whatsapp-panel{right:0;bottom:68px}body:has(.privacy-banner:not([hidden])) .whatsapp-assistant{bottom:176px}}
@media(prefers-reduced-motion:reduce){.language-picker-chevron,.whatsapp-contact,.whatsapp-contact-icon svg,.whatsapp-prompts button,.whatsapp-continue{transition:none}.whatsapp-contact-icon::before,.whatsapp-panel{animation:none}.whatsapp-contact:hover,.whatsapp-contact:hover svg,.whatsapp-continue:hover,.whatsapp-prompts button:hover{transform:none}}

/* Contact label is contextual, not a permanent message. */
.whatsapp-contact{position:relative}
.whatsapp-contact-label{position:absolute;right:74px;width:max-content;max-width:min(260px,calc(100vw - 110px));opacity:0;visibility:hidden;pointer-events:none;transform:translateX(8px);transition:opacity 180ms ease,transform 220ms cubic-bezier(.22,1,.36,1),visibility 180ms}
.whatsapp-contact:focus-visible .whatsapp-contact-label{display:block;opacity:1;visibility:visible;transform:none}
@media(hover:hover) and (pointer:fine){.whatsapp-contact:hover .whatsapp-contact-label{display:block;opacity:1;visibility:visible;transform:none}}
.whatsapp-assistant.is-open .whatsapp-contact-label{opacity:0;visibility:hidden}
.whatsapp-contact-icon{overflow:hidden;background:linear-gradient(145deg,#65ef94,#25d366 55%,#159547);box-shadow:inset 0 1px 1px #ffffff80,0 8px 24px #0007;transition:box-shadow 220ms,transform 220ms}
.whatsapp-contact-icon>i{display:none}
.whatsapp-contact-icon::before{inset:0;border:0;background:linear-gradient(110deg,transparent 25%,#ffffff85 50%,transparent 75%);border-radius:inherit;transform:translateX(-140%) rotate(15deg);animation:omni-contact-sheen 3.8s cubic-bezier(.22,1,.36,1) 1}
.whatsapp-contact:is(:hover,:focus-visible) .whatsapp-contact-icon{box-shadow:inset 0 1px 1px #ffffffa0,0 8px 30px #25d36640;transform:translateY(-2px)}
.whatsapp-contact:is(:hover,:focus-visible) .whatsapp-contact-icon::before{animation:omni-contact-sheen-hover 800ms ease both}
.whatsapp-contact[aria-expanded=true] .whatsapp-contact-icon svg{transform:rotate(-12deg)}
.whatsapp-panel{--hf-panel-open:1;animation:none;clip-path:inset(calc((1 - var(--hf-panel-open))*100%) 0 0 round 22px);opacity:var(--hf-panel-open)}
@keyframes omni-contact-sheen{0%,65%{transform:translateX(-140%) rotate(15deg)}100%{transform:translateX(140%) rotate(15deg)}}
@keyframes omni-contact-sheen-hover{from{transform:translateX(-140%) rotate(15deg)}to{transform:translateX(140%) rotate(15deg)}}
@media(prefers-reduced-motion:reduce){.whatsapp-contact-label,.whatsapp-contact-icon{transition:none}.whatsapp-contact-icon::before{animation:none!important;display:none}.whatsapp-panel{clip-path:none;opacity:1}.whatsapp-contact:is(:hover,:focus-visible) .whatsapp-contact-icon{transform:none}}

/* One continuous track keeps module labels readable without a hard loop cut. */
.hero-proof.hero-proof-animated{display:flex;width:100%;max-width:none;flex-wrap:nowrap;gap:0;margin-top:34px;padding:0;border:0;background:transparent;color:#c6d1ca}
.module-marquee{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.module-track{display:flex;width:max-content;animation:module-drift 28s linear infinite}
.module-group{display:flex;align-items:center;flex:none;gap:0}
.hero-proof .module-group>span{display:flex;align-items:center;width:auto;flex:none;padding:13px 30px;white-space:nowrap;font-size:12px;letter-spacing:.1em}
.module-group>span::before{content:none}
@keyframes module-drift{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.module-track{animation:none;width:100%;transform:none}.module-group{flex-wrap:wrap;justify-content:center}.module-group[aria-hidden]{display:none}.module-marquee{mask-image:none}.hero-proof .module-group>span{padding:10px 14px;font-size:11px;gap:12px}}
.module-marquee{container-type:inline-size}.module-group{min-width:100cqw;justify-content:space-around}

/* Narrow laptop headers switch before navigation starts crowding the brand. */
@media (max-width:1100px){
  .desktop-nav,.nav-demo,.nav-actions>.button{display:none}
  .nav-actions{margin-left:auto;gap:10px}
  .menu-toggle{display:block}
  .mobile-menu{
    position:absolute;
    top:68px;
    right:16px;
    left:16px;
    display:grid;
    gap:4px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(14,16,16,.97);
    box-shadow:0 24px 60px rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transform:translate3d(0,-8px,0) scale(.98);
    transform-origin:top right;
    transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out);
  }
  .mobile-menu.is-open{opacity:1;pointer-events:auto;transform:translate3d(0,0,0) scale(1)}
  .mobile-menu>a:not(.button){min-height:46px;padding:13px 12px;border-radius:10px;color:var(--ink-2);font-size:14px}
  .mobile-menu .button{margin-top:4px}
}

@media (min-width:1101px) and (max-width:1240px){
  .desktop-nav{gap:24px;margin-right:24px}
  .nav-actions{gap:12px}
  .brand{font-size:19px}
  .button-small{padding-inline:16px}
}

/* The hero capability rail is motion-only visually and never pauses on hover. */
.hero-proof.hero-proof-animated>span:not(.sr-only){display:none}
.hero-proof.is-paused .module-track,
.hero-proof:focus-within .module-track{animation-play-state:running}
@media(hover:hover){.hero-proof:hover .module-track{animation-play-state:running}}

/* Limpieza de fondo: eliminamos capas decorativas que estaban dejando sombras,
   números y texturas detrás del contenido. */
body,
body.serene-motion,
body.solution-page{
  background:
    radial-gradient(ellipse at 84% 7%,rgba(0,255,81,.16),transparent 31rem),
    radial-gradient(ellipse at 14% 36%,rgba(0,255,81,.065),transparent 26rem),
    radial-gradient(ellipse at 72% 74%,rgba(18,78,46,.14),transparent 34rem),
    #08080a!important;
}
.ambient-scene,
.serene-motion .ambient-scene,
.solution-page .ambient-scene{
  background:
    radial-gradient(ellipse at 78% 9%,rgba(0,255,81,.12),transparent 30rem),
    radial-gradient(ellipse at 22% 58%,rgba(16,80,47,.12),transparent 32rem)!important;
}
.ambient-scene::before,
.ambient-scene::after,
.serene-motion .ambient-scene::before,
.serene-motion .ambient-scene::after,
.solution-page .ambient-scene::before,
.solution-page .ambient-scene::after,
.ambient-ribbon,
#ambient-dust,
.hf-cosmic-orb,
.serene-motion .ambient-scene .hf-cosmic-orb{
  display:none!important;
  opacity:0!important;
  animation:none!important;
}
.serene-pause{
  display:none!important;
}

.cinematic-visual{
  display:none!important;
  opacity:0!important;
}

/* Ritmo editorial compacto: cada bloque debe sentirse como una pantalla cerrada,
   no como una página interminable que queda cortada entre scrolls. */
.section,
.business-showcase{
  border-top:1px solid rgba(255,255,255,.055);
}

@media (min-width: 1024px) and (min-height: 680px){
  html{
    scroll-snap-type:y proximity;
    scroll-padding-top:var(--header);
  }

  main > section,
  .cinematic-scroll > .hero,
  .cinematic-scroll > .evolution{
    scroll-snap-align:start;
  }

  .hero{
    min-height:100svh;
    padding:clamp(98px,12vh,132px) 0 24px;
  }

  .hero-grid{
    gap:clamp(38px,5vw,64px);
  }

  .hero h1{
    font-size:clamp(52px,5.35vw,78px);
  }

  .hero-lead{
    margin-top:22px;
    font-size:18px;
    line-height:1.52;
  }

  .hero-actions{
    margin-top:26px;
  }

  .hero-media{
    padding:10px 0 32px;
  }

  .hero-photo{
    max-height:58svh;
  }

  .hero-proof{
    margin-top:26px;
    padding-top:15px;
  }

  .cinematic-scroll > .evolution{
    min-height:calc(100svh - var(--header))!important;
  }

  .section,
  .business-showcase{
    display:flex;
    align-items:center;
    min-height:calc(100svh - var(--header));
    padding-block:clamp(42px,6vh,72px)!important;
  }

  .section > .shell,
  .business-showcase > .shell{
    width:min(1280px,calc(100% - 48px));
  }

  .section-intro{
    margin-bottom:clamp(22px,3.5vh,34px);
  }

  .section-intro h2,
  .faq-heading h2,
  .final-card h2{
    margin-top:12px;
    font-size:clamp(36px,4.45vw,60px);
    line-height:1;
  }

  .section-intro > p:last-child,
  .section-intro.split > p{
    font-size:16px;
    line-height:1.5;
  }

  .section-intro.split{
    gap:clamp(28px,4vw,52px);
    align-items:center;
  }

  .evolution{
    padding-top:0!important;
  }

  .evolution-rail{
    gap:12px;
  }

  .evolution-card{
    min-height:clamp(330px,48vh,420px);
    padding:18px;
  }

  .paper-scene,
  .sheet-scene,
  .connected-scene{
    width:min(82%,280px);
  }

  .evolution-card h3{
    font-size:21px;
  }

  .evolution-card p{
    font-size:13px;
    line-height:1.45;
  }

  .product{
    padding-top:0!important;
    background:transparent;
  }

  .product-toolbar{
    margin-bottom:14px;
  }

  .product-viewport,
  .product-viewport.hf-device-ready{
    height:clamp(510px,calc(100svh - 245px),660px)!important;
    min-height:510px!important;
  }

  .device-stage{
    min-height:0;
  }

  .connected-flow .section-intro{
    margin-bottom:24px;
  }

  .flow-bento{
    grid-template-rows:repeat(2,minmax(245px,28vh));
  }

  .flow-card{
    padding:24px;
  }

  .flow-copy h3{
    font-size:clamp(24px,2.4vw,34px);
  }

  .sale-receipt{
    width:min(340px,44%);
    right:-12px;
    bottom:-44px;
  }

  .industries .section-intro{
    margin-bottom:20px;
  }

  .business-explorer{
    grid-template-columns:.95fr 1.05fr;
  }

  .business-photo{
    min-height:clamp(360px,48vh,470px);
  }

  .business-content{
    padding:24px;
  }

  .profile-options{
    max-height:132px;
    overflow:auto;
    margin:14px 0 18px;
    padding-right:4px;
    scrollbar-color:#59625d #111514;
  }

  .profile-options button{
    min-height:40px;
    padding:8px 10px;
  }

  .profile-detail{
    padding-top:18px;
  }

  .profile-detail h3{
    font-size:clamp(24px,2.4vw,32px);
  }

  .profile-detail p{
    margin:10px 0 14px;
    font-size:14px;
    line-height:1.5;
  }

  .profile-actions{
    margin:18px 0 10px;
  }

  .crm-showcase,
  .communications-stage,
  .julieta-layout,
  .offline-layout{
    max-height:calc(100svh - 270px);
    min-height:420px;
  }

  .crm-showcase,
  .communications-stage{
    overflow:hidden;
  }

  .crm-showcase .hf-crm-frame{
    height:min(470px,calc(100svh - 320px));
  }

  .channel-preview{
    min-height:0!important;
  }

  .omni-channel-device{
    min-height:min(330px,calc(100svh - 340px));
  }

  .julieta-layout{
    align-items:center;
    gap:clamp(28px,5vw,70px);
  }

  .julieta-method{
    margin-block:22px;
  }

  .julieta-lab{
    max-height:calc(100svh - 260px);
    overflow:auto;
  }

  .offline-demo{
    align-self:center;
  }

  .business-showcase .section-intro{
    margin-bottom:16px;
  }

  .business-showcase-toolbar{
    margin:14px 0;
  }

  .business-showcase-viewport{
    padding:6px 0 18px;
  }

  .business-showcase-card{
    width:300px;
    flex-basis:300px;
  }

  .business-showcase-card > img,
  .business-slot-art{
    height:205px;
  }

  .business-card-copy{
    padding:18px;
  }

  .business-card-copy h3{
    margin:8px 0;
    font-size:21px;
  }

  .markets-section .section-intro{
    margin-bottom:18px;
  }

  .market-explorer{
    grid-template-columns:minmax(0,1fr) 300px;
    gap:18px;
  }

  .world-viewport{
    height:min(360px,42vh)!important;
    max-height:360px!important;
  }

  .market-key{
    margin-bottom:10px;
  }

  .world-controls{
    margin-top:8px;
  }

  .market-selection{
    padding:18px;
  }

  .country-options{
    max-height:118px;
  }

  .market-footnote{
    margin-top:12px;
  }

  .pricing .section-intro{
    margin-bottom:24px;
  }

  .pricing-grid{
    gap:14px;
  }

  .plan-card{
    min-height:clamp(405px,56vh,470px);
    padding:24px;
  }

  .plan-price{
    margin-top:20px;
    padding-bottom:18px;
  }

  .plan-card ul{
    gap:10px;
    margin:20px 0 22px;
  }

  .faq{
    padding-bottom:clamp(42px,6vh,70px)!important;
  }

  .faq-grid{
    gap:clamp(44px,7vw,82px);
  }

  .faq-heading{
    position:static;
  }

  .faq-list summary{
    min-height:64px;
    font-size:16px;
  }

  .faq-list details p{
    padding-bottom:18px;
  }

  .final-cta{
    min-height:calc(86svh - var(--header));
    padding-top:clamp(42px,6vh,70px)!important;
  }

  .final-card{
    padding:clamp(54px,8vh,78px) 32px;
  }
}

@media (max-width: 1023px){
  html{
    scroll-snap-type:none;
  }

  .section,
  .business-showcase{
    padding-block:68px;
  }

  .section-intro{
    margin-bottom:30px;
  }

  .business-explorer,
  .crm-showcase,
  .communications-stage,
  .julieta-layout,
  .offline-layout{
    border-radius:22px;
  }
}

@media (max-width: 700px){
  .section,
  .business-showcase{
    padding-block:58px;
  }

  .section-intro h2,
  .faq-heading h2,
  .final-card h2{
    font-size:clamp(34px,10vw,46px);
  }

  .section-intro > p:last-child,
  .section-intro.split > p{
    font-size:15px;
    line-height:1.55;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-snap-type:none!important;
  }
}

/* Tarjetas flotantes del hero: por debajo de 900px la foto es demasiado angosta para
   ponerlas lado a lado (la del ticket tapaba "Ventas de hoy"), así que se apilan. */
@media (max-width: 900px) {
  .hero-ticket { left: 12px; bottom: 164px; min-width: 0; }
}

/* Legibilidad y área táctil mínima en texto real (no en las pantallas de demostración). */
.hero-status span, .hero-status small, .hero-ticket small, .journey-photo-note { font-size: max(12px, 1em); }
.journey-visual .journey-photo-note { font-size: 11px !important; }
.business-content a[href="/soluciones/"] { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 780px) {
  .eyebrow { font-size: 12px; }
  .journey-tabs button { font-size: 12px; }
}