.elementor-kit-5{--e-global-color-primary:#16D62A;--e-global-color-secondary:#6B5BD6;--e-global-color-text:#C3C8D4;--e-global-color-accent:#35F03A;--e-global-color-l3bg:#010204;--e-global-color-l3surface:#0E1220;--e-global-color-l3inset:#090C15;--e-global-color-l3white:#FFFFFF;--e-global-color-l3muted:#8990A0;--e-global-color-l3contrast:#04210A;--e-global-color-l3blue:#2F56D6;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:600;--e-global-typography-l3mono-font-family:"Space Mono";--e-global-typography-l3mono-font-weight:400;background-color:#010204;color:#C3C8D4;font-family:"Poppins", Poppins, system-ui, -apple-system, sans-serif;font-weight:400;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 p{margin-block-end:0px;}.elementor-kit-5 h1{color:#FFFFFF;font-family:"Poppins", Poppins, system-ui, -apple-system, sans-serif;font-size:5rem;font-weight:800;text-transform:uppercase;line-height:1.02em;letter-spacing:-0.02em;}.elementor-kit-5 h2{color:#FFFFFF;font-family:"Poppins", Poppins, system-ui, -apple-system, sans-serif;font-size:3.5rem;font-weight:800;line-height:1.05em;}.elementor-kit-5 h3{color:#FFFFFF;font-family:"Poppins", Poppins, system-ui, -apple-system, sans-serif;font-size:1.75rem;font-weight:700;line-height:1.25em;}.elementor-kit-5 h4{color:#FFFFFF;font-family:"Poppins", Poppins, system-ui, -apple-system, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.35em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:24px;--container-default-padding-bottom:0px;--container-default-padding-left:24px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-5 h1{font-size:3.2rem;}.elementor-kit-5 h2{font-size:2.3rem;}.elementor-kit-5 h3{font-size:1.5rem;}.elementor-kit-5 h4{font-size:1.3rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5 h1{font-size:2.4rem;}.elementor-kit-5 h2{font-size:1.9rem;}.elementor-kit-5 h3{font-size:1.4rem;}.elementor-kit-5 h4{font-size:1.25rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* L3 WP overrides (no-JS) */
body{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);margin:0;}
.l3-wp-header{position:fixed;top:0;left:0;right:0;z-index:600;}
.l3-wp-header .nav-item:hover .nav-dropdown,.l3-wp-header .nav-dropdown:hover{display:grid;animation:l3-fade .18s ease-out;}
/* Elementor wrappers: let our fixed header sit flush */
[data-elementor-type="header"]{position:relative;z-index:600;}
[data-elementor-type="header"] .elementor-widget-html,[data-elementor-type="header"] .elementor-container{padding:0!important;margin:0!important;}
[data-elementor-type="footer"] .elementor-widget-html{padding:0!important;}
/* Elementor may add top spacing; kill default section gaps around our HTML widgets */
.elementor-widget-html{margin:0!important;}

/* ==========================================================================
   Lets Three (L3) — design tokens + base + components
   Ported from the "Lets Three" Claude Design system.
   ========================================================================== */



:root {
  color-scheme: dark;

  /* Color -------------------------------------------------------------- */
  --green-300: #6bff74;
  --green-400: #35f03a;
  --green-500: #16d62a;
  --green-600: #0fb523;
  --green-700: #0a8a1b;

  --violet-300: #b3a4f0;
  --violet-400: #8a74e8;
  --violet-500: #6b5bd6;
  --violet-600: #5a3fc0;
  --violet-700: #4a2ea6;

  --blue-500: #2f56d6;
  --blue-700: #1f2a7a;

  --space-950: #010204;
  --space-900: #05070d;
  --space-850: #090c15;
  --space-800: #0e1220;
  --space-700: #151a2b;
  --space-600: #1e2434;
  --space-500: #2b3244;
  --space-400: #3c4356;
  --space-300: #5a6076;

  --white: #ffffff;
  --paper-100: #f4f5f7;
  --paper-200: #ece0e0;
  --grey-400: #9aa0ac;
  --grey-500: #6b7280;

  --bg-page: var(--space-950);
  --bg-elevated: var(--space-900);
  --surface-card: var(--space-800);
  --surface-card-hover: var(--space-700);
  --surface-inset: var(--space-850);
  --surface-light: var(--paper-100);

  --text-primary: var(--white);
  --text-secondary: #c3c8d4;
  --text-muted: #8990a0;
  --text-on-light: #0e1220;
  --text-accent: var(--green-500);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-accent: var(--green-500);

  --accent: var(--green-500);
  --accent-hover: var(--green-400);
  --accent-press: var(--green-600);
  --accent-contrast: #04210a;

  --secondary: var(--violet-500);
  --secondary-hover: var(--violet-400);

  --focus-ring: rgba(22, 214, 42, 0.55);

  --header-bg: rgba(1, 2, 4, 0.66);

  /* Typography ----------------------------------------------------------- */
  --font-display: 'Poppins', 'Montserrat', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-eyebrow: 0.8125rem;
  --fs-caption: 0.8125rem;
  --fs-body-sm: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.1875rem;
  --fs-h4: 1.375rem;
  --fs-h3: 1.75rem;
  --fs-h2: 2.5rem;
  --fs-h1: 3.5rem;
  --fs-display: 5rem;

  --lh-tight: 1.02;
  --lh-heading: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  --ls-eyebrow: 0.28em;
  --ls-display: -0.01em;
  --ls-tight: -0.02em;

  /* Spacing / radii -------------------------------------------------------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  --section-y: 96px;
  --container-max: 1200px;
  --container-pad: 24px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --control-h: 58px;
  --control-h-sm: 44px;

  /* Effects ---------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  --glow-green: 0 0 0 1px var(--green-500), 0 0 24px rgba(22, 214, 42, 0.35);
  --glow-green-soft: 0 0 32px rgba(22, 214, 42, 0.25);
  --glow-violet: 0 0 28px rgba(107, 91, 214, 0.35);

  --grad-space: radial-gradient(120% 120% at 50% 0%, #0c1330 0%, #04060f 45%, #010204 100%);
  --grad-nebula: linear-gradient(135deg, #1f2a7a 0%, #4a2ea6 55%, #050710 100%);
  --grad-green: linear-gradient(135deg, var(--green-400), var(--green-600));
  --grad-card: linear-gradient(160deg, rgba(30, 42, 122, 0.35), rgba(9, 12, 21, 0.9));

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* Light ("white") mode — page chrome (backgrounds, text, borders, shadows)
   switches; the cosmic accent panels (CTA banners, service cards, nebula
   gradients, hero video) stay dark by design in both modes. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-page: #ffffff;
  --bg-elevated: var(--paper-100);
  --surface-card: #ffffff;
  --surface-card-hover: var(--paper-100);
  --surface-inset: var(--paper-100);

  --text-primary: var(--text-on-light);
  --text-secondary: #43485a;
  --text-muted: var(--grey-500);

  --border-subtle: rgba(14, 18, 32, 0.09);
  --border-default: rgba(14, 18, 32, 0.16);

  --accent-contrast: #04210a;

  --shadow-sm: 0 1px 2px rgba(14, 18, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(14, 18, 32, 0.08);
  --shadow-lg: 0 24px 60px rgba(14, 18, 32, 0.12);

  --header-bg: rgba(255, 255, 255, 0.68);
}
:root[data-theme="light"] .card-service,
:root[data-theme="light"] .cta-panel { color: #fff; }
:root[data-theme="light"] .card-service p { color: rgba(255, 255, 255, 0.72); }
:root[data-theme="light"] .card-service .l3-eyebrow { color: rgba(255, 255, 255, 0.55); }
:root[data-theme="light"] .cta-panel p { color: rgba(255, 255, 255, 0.82); }
:root[data-theme="light"] .img-placeholder { color: rgba(255, 255, 255, 0.55); }

/* Base --------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
p { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--accent-hover); }
button { font: inherit; }
::selection { background: rgba(22, 214, 42, 0.3); }
*:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Scrollbar and form controls carry the palette instead of browser defaults. */
html { scrollbar-color: var(--space-700) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--space-700);
  border: 3px solid var(--bg-page);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--space-600, var(--accent-press)); }
input, textarea, select { accent-color: var(--accent); caret-color: var(--accent); }

@keyframes l3-fadeup { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes l3-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes l3-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes l3-spin { to { transform: rotate(360deg); } }

.l3-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.l3-eyebrow em { color: var(--accent); font-style: normal; }

.l3-underline {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}

.page-enter { animation: l3-fadeup .55s var(--ease-out) both; }

/* Scroll-reveal — headings, cards and text fade/slide in as they enter view. */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .page-enter { animation: none; }
}

/* Layout helpers ------------------------------------------------------------ */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 32px; }
.section { padding: var(--section-y) 32px; }
.section-tight { padding: 70px 32px 110px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.text-center { text-align: center; }

/* Header / nav --------------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease-out), border-color .3s, backdrop-filter .3s;
}
/* On scroll the bar fades to a translucent dark (~65%) with blur; invisible at the top. */
.site-header.is-scrolled {
  background: var(--header-bg);
  border-bottom-color: var(--border-subtle);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.site-header .bar {
  max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 78px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 46px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  color: var(--text-secondary); padding: 10px 15px; border-radius: 9px;
  transition: color .2s; display: inline-flex; align-items: center; gap: 7px;
}
.nav-link:hover { color: var(--text-primary); }
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px;
  width: 560px; max-width: calc(100vw - 32px); background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 16px; padding: 10px; box-shadow: var(--shadow-lg); gap: 4px;
  grid-template-columns: 1fr 1fr; display: none;
}
.nav-dropdown.is-open { display: grid; animation: l3-fade .18s ease-out; }
.nav-dropdown-item {
  text-align: left; background: none; border: none; cursor: pointer; padding: 10px 12px;
  border-radius: 11px; display: flex; align-items: center; gap: 12px; transition: background .16s;
  width: 100%;
}
.nav-dropdown-item:hover { background: var(--surface-card-hover); }
.nav-dropdown-ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--hue);
  background: color-mix(in srgb, var(--hue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hue) 38%, transparent);
}
.nav-dropdown-ic svg { width: 22px; height: 22px; }
.nav-dropdown-item:not(:has(svg)) .nav-dropdown-ic { font-size: 1.2rem; }
.nav-dropdown-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Theme toggle -------------------------------------------------------------- */
.theme-toggle {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-card); border: 1px solid var(--border-default);
  color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.nav-dropdown-item .t { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.nav-dropdown-item .s {
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nav-cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 14px; height: 50px;
  padding: 0 8px 0 24px; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-contrast);
  border: none; cursor: pointer; box-shadow: var(--glow-green-soft); transition: background .2s;
}
.nav-cta:hover { background: var(--accent-hover); }
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(4, 33, 10, 0.18); flex-shrink: 0;
}

/* Buttons -------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  border-radius: var(--radius-pill); cursor: pointer; border: 1.5px solid transparent;
  transition: all var(--dur) var(--ease-out); text-decoration: none; white-space: nowrap;
}
.btn-md { height: 58px; padding: 0 8px 0 26px; font-size: 1.0625rem; }
.btn-lg { height: 60px; padding: 0 8px 0 30px; font-size: 1.05rem; }
.btn-sm { height: 44px; padding: 0 18px; font-size: 0.9375rem; gap: 10px; }
.btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--glow-green-soft); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--secondary); color: #fff; }
.btn-secondary:hover { background: var(--secondary-hover); }
.btn-outline { background: rgba(5,7,13,0.6); color: #fff; border-color: var(--accent); box-shadow: var(--glow-green-soft); }
.btn-outline:hover { background: rgba(22,214,42,0.12); }
.btn-ghost { background: transparent; color: #fff; border-color: var(--border-default); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn .chip {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0;
}
.btn-md .chip { width: 46px; height: 46px; }
.btn-lg .chip { width: 44px; height: 44px; }
.btn-sm .chip { width: 32px; height: 32px; }
.btn-primary .chip { background: rgba(4,33,10,0.18); color: var(--accent-contrast); }
.btn-secondary .chip { background: rgba(255,255,255,0.16); color: #fff; }
.btn-outline .chip, .btn-ghost .chip { background: var(--accent); color: var(--accent-contrast); }
.btn-block { width: 100%; justify-content: space-between; }

/* Ticker bar ------------------------------------------------------------------ */
.ticker { overflow: hidden; background: var(--accent); color: var(--accent-contrast); }
.ticker-track {
  display: inline-flex; align-items: center; white-space: nowrap; padding: 11px 0;
  animation: l3-ticker 28s linear infinite;
  font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.ticker-track span.item { padding: 0 22px; }
.ticker-track span.dot { opacity: .55; }

/* Feature list (checkmarks) ---------------------------------------------------- */
.feature-item { display: flex; align-items: flex-start; gap: 14px; }
.feature-item .dot {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(22,214,42,0.14);
  border: 1px solid rgba(22,214,42,0.4); margin-top: 2px;
}
.feature-item .txt { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: 1.5; }

/* Cards ------------------------------------------------------------------------ */
.card-service {
  text-align: left; cursor: pointer; position: relative; overflow: hidden;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--grad-card);
  color: inherit; min-height: 210px; padding: 26px; display: flex; flex-direction: column; gap: 8px;
  font-family: inherit; transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
  width: 100%;
}
.card-service:hover { transform: translateY(-5px); box-shadow: var(--glow-green-soft); border-color: var(--border-default); }
.card-service .l3-eyebrow { margin-bottom: auto; }
.card-service h3 { font-size: var(--fs-h4); margin: 0; }
.card-service p { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: 1.45; }

.card-service-lg {
  text-align: left; cursor: pointer; font-family: inherit; color: inherit; position: relative;
  overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--surface-card); padding: 36px 40px; display: grid;
  grid-template-columns: 72px 1fr auto; gap: 28px; align-items: center;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s; width: 100%;
}
.card-service-lg:hover { transform: translateY(-4px); box-shadow: 0 18px 46px -22px color-mix(in srgb, var(--hue) 60%, transparent); border-color: color-mix(in srgb, var(--hue) 45%, var(--border-subtle)); }
.card-service-lg .icon {
  width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  color: var(--hue); background: color-mix(in srgb, var(--hue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hue) 42%, transparent);
  box-shadow: inset 0 0 22px -8px color-mix(in srgb, var(--hue) 70%, transparent);
}
.card-service-lg .icon svg { width: 36px; height: 36px; }
.card-service-lg h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.card-service-lg p { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: 1.5; max-width: 620px; margin: 0; }
.card-service-lg .arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 50%; color: var(--hue);
  background: color-mix(in srgb, var(--hue) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hue) 45%, transparent);
  flex-shrink: 0; transition: transform .3s var(--ease-out), background .3s;
}
.card-service-lg:hover .arrow { transform: translateX(3px); background: color-mix(in srgb, var(--hue) 22%, transparent); }

.card-service-sm {
  text-align: left; cursor: pointer; font-family: inherit; color: inherit;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card);
  padding: 20px 22px; display: flex; align-items: center; gap: 14px;
  transition: border-color .2s, background .2s; width: 100%;
}
.card-service-sm:hover { border-color: var(--border-default); background: var(--surface-card-hover); }
.card-service-sm .icon { font-size: 1.3rem; }
.card-service-sm .t { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }

.card-case {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-card); transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.card-case:hover { transform: translateY(-5px); box-shadow: var(--glow-green-soft); border-color: var(--border-default); }
.card-case .media { position: relative; aspect-ratio: 16/9; }
.card-case .tag {
  position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; padding: 6px 14px;
  border-radius: var(--radius-pill); background: rgba(1,2,4,0.72); backdrop-filter: blur(6px);
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--green-400); border: 1px solid rgba(22,214,42,0.35); pointer-events: none;
}
.card-case .body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; }
.card-case .name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body); }
.card-case .domain { color: var(--accent); font-size: var(--fs-body-sm); font-weight: 500; }

.card-blog {
  text-align: left; cursor: pointer; font-family: inherit; color: inherit;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-card); display: flex; flex-direction: column;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s; width: 100%; padding: 0;
}
.card-blog:hover { transform: translateY(-5px); box-shadow: var(--glow-green-soft); border-color: var(--border-default); }
.card-blog .media { aspect-ratio: 16/10; position: relative; }
.card-blog .body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-blog .meta { display: flex; align-items: center; gap: 12px; }
.card-blog .cat {
  display: inline-flex; padding: 4px 11px; border-radius: var(--radius-pill); background: rgba(22,214,42,0.14);
  color: var(--green-400); border: 1px solid rgba(22,214,42,0.35); font-family: var(--font-display);
  font-weight: 600; font-size: 0.68rem; letter-spacing: 0.02em;
}
.card-blog .date { color: var(--text-muted); font-size: 0.78rem; }
.card-blog h3 { font-size: var(--fs-h4); line-height: 1.2; text-transform: none; }
.card-blog p { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: 1.55; margin: 0; flex: 1; }
.card-blog .more { color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; }

.card-value { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 32px; }
.card-value .icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(22,214,42,0.12); border: 1px solid rgba(22,214,42,0.35); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; font-size: 1.5rem; }
.card-value h3 { font-size: var(--fs-h4); margin-bottom: 10px; }
.card-value p { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: 1.55; margin: 0; }

.stat-tile { padding: 28px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); text-align: center; }
.stat-tile .n { font-family: var(--font-display); font-weight: 800; font-size: 3rem; color: var(--accent); line-height: 1; margin-bottom: 10px; }
.stat-tile .label { color: var(--text-secondary); font-size: var(--fs-body-sm); }

.testimonial { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.testimonial p { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.6; margin: 0; flex: 1; }
.testimonial .who { display: flex; align-items: center; gap: 14px; }
.testimonial .avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: var(--grad-nebula); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.testimonial .name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
.testimonial .role { color: var(--text-muted); font-size: 0.85rem; }

.cta-panel { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: var(--grad-nebula); padding: 72px 56px; text-align: center; }
.cta-panel h2 { font-size: var(--fs-h1); margin-bottom: 18px; }
.cta-panel p { color: rgba(255,255,255,0.82); font-size: var(--fs-body-lg); max-width: 560px; margin: 0 auto 34px; }

/* Image placeholder (stand-in for design-canvas <image-slot>) --------------------- */
.img-placeholder {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
  background: linear-gradient(160deg, rgba(30,42,122,0.35), rgba(9,12,21,0.95));
  color: var(--text-muted); font-family: var(--font-display); font-weight: 500; font-size: 0.85rem;
}
/* Fills a position:relative .media box (case/blog cards, article hero). */
.media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card-case:hover .media-img, .card-blog:hover .media-img { transform: scale(1.04); }
.media-img { transition: transform .5s var(--ease-out); }

/* Form fields ------------------------------------------------------------------- */
.field { display: block; }
.field .lbl { display: block; margin-bottom: 8px; font-size: var(--fs-caption); font-weight: 500; color: var(--text-secondary); }
.field input, .field select, .field textarea {
  width: 100%; height: var(--control-h-sm); box-sizing: border-box; padding: 0 16px;
  background: var(--surface-inset); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body-sm); outline: none;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field textarea { height: auto; padding: 12px 16px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; padding-right: 40px; cursor: pointer; }
.field-select-wrap { position: relative; }
.field-select-wrap svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Footer -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border-subtle); background: var(--bg-elevated); }
.site-footer .cols { max-width: 1200px; margin: 0 auto; padding: 64px 32px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer .brand-col img { height: 52px; width: auto; display: block; margin-bottom: 20px; }
.site-footer .brand-col p { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: 1.6; max-width: 280px; }
.site-footer .head { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; }
.site-footer .links { display: grid; gap: 12px; }
.site-footer .links a, .site-footer .links button {
  text-align: left; background: none; border: none; cursor: pointer; color: var(--text-secondary);
  font-family: var(--font-body); font-size: var(--fs-body-sm); padding: 0; transition: color .2s;
}
.site-footer .links a:hover, .site-footer .links button:hover { color: var(--accent); }
.site-footer .bottom { border-top: 1px solid var(--border-subtle); }
.site-footer .bottom .row { max-width: 1200px; margin: 0 auto; padding: 22px 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--text-muted); font-size: 0.82rem; }

.wa-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 100;
  height: 62px; width: auto; min-width: 62px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; display: inline-flex; align-items: center;
  box-shadow: var(--glow-green); overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.wa-fab .wa-ic { flex: 0 0 62px; height: 62px; display: grid; place-items: center; }
.wa-fab .wa-label {
  max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: #fff;
  transition: max-width .38s var(--ease-out), opacity .3s var(--ease-out), padding .38s var(--ease-out);
  padding-left: 0;
}
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,0.18), var(--glow-green); }
.wa-fab:hover .wa-label { max-width: 220px; opacity: 1; padding-left: 22px; }
@media (prefers-reduced-motion: reduce) { .wa-fab, .wa-fab .wa-label { transition: none; } }

.contact-channel {
  display: flex; align-items: center; gap: 16px; padding: 24px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); background: var(--surface-card); text-decoration: none; color: inherit;
  transition: border-color .2s;
}
.contact-channel:hover { border-color: var(--accent); }
.contact-channel .icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(22,214,42,0.12); border: 1px solid rgba(22,214,42,0.35); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-channel .icon.violet { background: rgba(107,91,214,0.16); border-color: rgba(107,91,214,0.4); }
.contact-channel .t { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; margin-bottom: 3px; }
.contact-channel .s { color: var(--text-secondary); font-size: var(--fs-body-sm); }

.back-link {
  background: none; border: none; cursor: pointer; color: var(--text-muted); font-family: var(--font-display);
  font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; padding: 0;
}
.back-link:hover { color: var(--accent); }

/* Section-specific hero backgrounds ------------------------------------------------- */
.hero-space { position: relative; overflow: hidden; background: var(--grad-space); }
/* Hero sections that carry a background video get a fixed height so the video
   isn't cropped short; content is vertically centered within it. */
.hero-space:has(.hero-video-bg) {
  min-height: 620px; display: flex; flex-direction: column; justify-content: center;
}
/* Optional looping background video inside a hero-space; content sits above it. */
.hero-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.7; }
/* Lighter scrim so the hero media is visible in the first fold; still keeps text legible.
   Darker only behind the text zone (center) and at the very edges. */
.hero-video-scrim {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(90% 70% at 50% 55%, rgba(4,6,15,0.55) 0%, rgba(4,6,15,0.12) 70%, rgba(4,6,15,0) 100%),
    linear-gradient(180deg, rgba(4,6,15,0.30) 0%, rgba(4,6,15,0.10) 45%, rgba(4,6,15,0.55) 100%);
}
.hero-space > .container { position: relative; z-index: 1; }
/* Keep hero text legible over the now-visible background video. */
.hero-space:has(.hero-video-bg) h1,
.hero-space:has(.hero-video-bg) > .container p,
.hero-space:has(.hero-video-bg) .l3-eyebrow { text-shadow: 0 2px 18px rgba(0,0,0,0.55); }
/* Reduced motion: keep the poster frame as a static hero image instead of hiding it
   (render() strips autoplay so the video stays paused on its poster). */

/* Ambient nebula — one subtle brand atmosphere reused across image-less sections. */
.has-ambient { position: relative; overflow: hidden; }
.has-ambient > *:not(.ambient-glow) { position: relative; z-index: 1; }
.ambient-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient-glow::before, .ambient-glow::after {
  content: ""; position: absolute;
  width: 46vw; max-width: 600px; height: 46vw; max-height: 600px;
  border-radius: 50%; filter: blur(100px); opacity: 0.13; will-change: transform;
}
.ambient-glow::before { background: radial-gradient(circle, var(--green-500) 0%, transparent 68%); top: -18%; left: -12%; animation: l3-drift-a 28s ease-in-out infinite alternate; }
.ambient-glow::after  { background: radial-gradient(circle, #2b3bb0 0%, transparent 68%); bottom: -22%; right: -14%; animation: l3-drift-b 34s ease-in-out infinite alternate; }
@keyframes l3-drift-a { to { transform: translate3d(70px, 48px, 0) scale(1.08); } }
@keyframes l3-drift-b { to { transform: translate3d(-64px, -42px, 0) scale(1.1); } }
:root[data-theme="light"] .ambient-glow::before, :root[data-theme="light"] .ambient-glow::after { opacity: 0.09; }
@media (prefers-reduced-motion: reduce) { .ambient-glow::before, .ambient-glow::after { animation: none; } }

/* Video hero — cosmos background video, kept dark/legible in both themes.
   Layer order (each absolute, later = on top by DOM order):
     video -> vignette (blurred ring, sharp center) -> scrim (readability) -> content */
.video-hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(460px, 92vh, 720px);
  background: #000;
}
.video-hero video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 40%;
}
@media (max-width: 640px) {
  .video-hero { min-height: clamp(420px, 100vh, 620px); }
  .video-hero .inner { padding: 80px 24px; }
}
.video-hero .vignette-blur {
  position: absolute; inset: -5%; pointer-events: none;
  backdrop-filter: blur(34px); -webkit-backdrop-filter: blur(34px);
  mask-image: radial-gradient(ellipse 60% 58% at 50% 42%, transparent 40%, #000 92%);
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 42%, transparent 40%, #000 92%);
}
.video-hero .scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1,2,4,0.34) 0%, rgba(1,2,4,0.16) 40%, var(--bg-page) 100%),
    radial-gradient(120% 90% at 50% 8%, rgba(1,2,4,0) 0%, rgba(1,2,4,0.22) 100%);
}
.video-hero .inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 120px 32px; width: 100%; }
/* Hero text always sits on the dark video/scrim, regardless of site theme. */
.video-hero .inner h1 { color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,0.6); }
.video-hero .inner p { color: rgba(255,255,255,0.82); }
.video-hero .inner .l3-eyebrow { color: rgba(255,255,255,0.65); }

/* Cases marquee ---------------------------------------------------------------------- */
.cases-marquee {
  background: #0C0C0C;
  padding: 96px 0 40px;           /* pt-24 pb-10 */
  overflow: hidden;
}
.cases-marquee .l3-eyebrow,
.cases-marquee h2 { color: #fff; }
.marquee-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;                       /* gap-3 entre as fileiras */
  /* As fileiras esvaem nas bordas em vez de cortarem seco na viewport. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee-row {
  display: flex;
  gap: 12px;                       /* gap-3 entre os tiles */
  flex-wrap: nowrap;
  will-change: transform;
}
.marquee-tile {
  flex: 0 0 auto;
  width: 420px;
  height: 270px;
  border-radius: 22px;             /* rounded-2xl */
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.marquee-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 640px) { .cases-marquee { padding-top: 128px; } }  /* sm:pt-32 */
@media (min-width: 768px) { .cases-marquee { padding-top: 160px; } }  /* md:pt-40 */
@media (max-width: 640px) {
  .marquee-tile { width: 300px; height: 190px; border-radius: 18px; }
}

/* AI CTA (robô + texto) -------------------------------------------------------------- */
.ai-cta {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.ai-cta-media { position: relative; }
.ai-cta-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}
@media (max-width: 860px) {
  .ai-cta { grid-template-columns: 1fr; gap: 24px; }
  .ai-cta-media { max-width: 420px; margin: 0 auto; }
}

/* "Outros serviços" — glass cards over nebula ---------------------------------------- */
.svc-section {
  position: relative; overflow: hidden;
  background: #05060d; padding: 90px 0 84px;
}
.svc-nebula {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Full-bleed galaxy photo; subtle dark overlay keeps the heading and glass cards legible. */
  background:
    linear-gradient(180deg, rgba(4,5,12,0.55) 0%, rgba(4,5,12,0.22) 42%, rgba(4,5,12,0.62) 100%),
    url('https://letsthree.com.br/wp-content/uploads/2026/09/svc-galaxy-bg-scaled.jpg') center/cover no-repeat;
}
.svc-section > *:not(.svc-nebula) { position: relative; z-index: 1; }
.svc-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.svc-head h2 { font-size: var(--fs-h1); text-transform: none; line-height: 1.08; margin: 12px 0 16px; }
.svc-grad {
  background: linear-gradient(92deg, #a855f7 0%, #6366f1 48%, #3b82f6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.svc-head p { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.6; margin: 0; }

.svc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; align-items: stretch; }
.svc-card {
  --hue: #a855f7;
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px;
  padding: 30px 20px 26px; border-radius: 20px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.09); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .35s var(--ease-out), border-color .3s, box-shadow .35s;
}
.svc-card:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--hue) 55%, transparent);
  box-shadow: 0 24px 55px -22px var(--hue), inset 0 1px 0 rgba(255,255,255,0.08);
}
.svc-ic {
  width: 58px; height: 58px; color: var(--hue);
  display: grid; place-items: center;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--hue) 55%, transparent));
}
.svc-ic svg { width: 100%; height: 100%; }
.svc-card h3 { font-size: 1.05rem; text-transform: none; margin: 2px 0 0; line-height: 1.2; }
.svc-rule { width: 34px; height: 3px; border-radius: 3px; background: var(--hue); opacity: 0.85; }
.svc-card p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; margin: 0; }
.svc-go {
  margin-top: auto; width: 46px; height: 46px; border-radius: 50%; color: #fff;
  display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--hue) 82%, #fff 18%), var(--hue));
  box-shadow: 0 8px 22px -8px var(--hue);
  transition: transform .3s var(--ease-out);
}
.svc-card:hover .svc-go { transform: scale(1.1); }
.svc-card.is-featured {
  --hue: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 26px 60px -26px var(--accent);
}
.svc-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 13px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-contrast);
  font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 8px 20px -6px var(--accent);
}
.svc-badge svg { display: block; }
@media (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .svc-section { padding: 44px 20px 40px; border-radius: 22px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 460px) { .svc-grid { grid-template-columns: 1fr; } }

/* Values — glass cards with neon icons (featured = green glow) ----------------------- */
.value-card {
  --hue: #e23fd0;
  position: relative; border-radius: 20px; padding: 30px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.09);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .35s var(--ease-out), border-color .3s, box-shadow .35s;
}
.value-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--hue) 50%, transparent);
  box-shadow: 0 24px 55px -24px var(--hue), inset 0 1px 0 rgba(255,255,255,0.07);
}
.value-card .v-ic {
  width: 56px; height: 56px; color: var(--hue); margin-bottom: 22px;
  display: grid; place-items: center;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--hue) 60%, transparent));
}
.value-card .v-ic svg { width: 100%; height: 100%; }
.value-card h3 { font-size: var(--fs-h4); margin-bottom: 10px; }
.value-card p { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: 1.55; margin: 0; }
.value-card.is-featured {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
              0 0 34px -4px color-mix(in srgb, var(--accent) 55%, transparent),
              0 26px 60px -26px var(--accent);
}

/* Stats — glass cards with a colored bottom glow ------------------------------------- */
.stat-card {
  --hue: #22d36a;
  position: relative; overflow: hidden; border-radius: 18px; padding: 30px 16px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.09);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .35s var(--ease-out), border-color .3s;
}
.stat-card::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--hue);
  box-shadow: 0 0 22px 2px var(--hue);
}
.stat-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--hue) 45%, transparent); }
.stat-card .n {
  font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1; margin-bottom: 10px;
  color: #fff; text-shadow: 0 0 24px rgba(255,255,255,0.28);
}
.stat-card .label { color: var(--text-secondary); font-size: var(--fs-body-sm); }
:root[data-theme="light"] .value-card, :root[data-theme="light"] .stat-card {
  background: linear-gradient(180deg, rgba(10,14,28,0.05), rgba(10,14,28,0.02));
  border-color: rgba(10,14,28,0.10);
}
:root[data-theme="light"] .stat-card .n { color: var(--text-primary); text-shadow: none; }

/* CRM — numbered "how it works" steps ------------------------------------------------ */
.crm-step {
  position: relative; padding: 30px 26px; border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  transition: transform .3s var(--ease-out), border-color .3s;
}
.crm-step:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.crm-step-n {
  display: block; margin-bottom: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1;
  color: var(--accent); text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);
}
.crm-step h3 { font-size: var(--fs-h4); text-transform: none; margin-bottom: 8px; }
.crm-step p { color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: 1.55; margin: 0; }

/* FlowField — particle flow-field section background ---------------------------------- */
.flow-bg { position: relative; overflow: hidden; background: #05060c; isolation: isolate; }
.flow-bg > .flowfield-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Vignette to focus the center and keep edge content legible over the particles. */
.flow-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 65% at 50% 45%, transparent 30%, rgba(5,6,12,0.86) 100%);
}
.flow-bg > *:not(.flowfield-canvas) { position: relative; z-index: 1; }

/* Responsive ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .main-nav, .nav-cta-label { display: none; }
  .nav-cta { padding: 0; width: 50px; justify-content: center; gap: 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  h1 { font-size: clamp(2.2rem, 8vw, 3.5rem) !important; }
}

/* L3 marquee auto-scroll (no-JS) */
@keyframes l3-marq-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes l3-marq-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.cases-marquee [data-marquee-row="1"]{animation:l3-marq-l 37.5s linear infinite}
.cases-marquee [data-marquee-row="2"]{animation:l3-marq-r 43.3s linear infinite}
@media(prefers-reduced-motion:reduce){.cases-marquee [data-marquee-row]{animation:none;transform:translateX(-20%)}}

/* L3 native widgets */
.l3btn .elementor-button{border-radius:999px;font-family:var(--font-display);font-weight:600;display:inline-flex;align-items:center;gap:14px;border:1px solid transparent;transition:background .2s}
.l3btn.l3-lg .elementor-button{height:60px;padding:0 8px 0 30px;font-size:1.05rem}
.l3btn.l3-md .elementor-button{height:58px;padding:0 8px 0 26px;font-size:1.0625rem}
.l3btn-primary .elementor-button{background:var(--accent);color:var(--accent-contrast);box-shadow:var(--glow-green-soft)}
.l3btn-primary .elementor-button:hover{background:var(--accent-hover)}
.l3btn-outline .elementor-button{background:rgba(5,7,13,.6);color:#fff;border-color:var(--accent);box-shadow:var(--glow-green-soft)}
.l3btn-outline .elementor-button:hover{background:rgba(22,214,42,.12)}
.l3btn .elementor-button-content-wrapper{display:flex;flex-direction:row-reverse;align-items:center;gap:0}
.l3btn .elementor-button-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin:0 0 0 4px;font-size:1rem}
.l3btn-primary .elementor-button-icon{background:rgba(4,33,10,.18);color:var(--accent-contrast)}
.l3btn-outline .elementor-button-icon{background:var(--accent);color:var(--accent-contrast)}
.l3-cta-panel{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--border-default);background:var(--grad-nebula,linear-gradient(135deg,#4a2ea6,#2f56d6))}
.elementor-widget-testimonial .elementor-testimonial__text{color:var(--text-secondary)}

/* L3 testimonial bits + rounded imgs */
.l3-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#6b5bd6,#2f56d6);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;flex-shrink:0}
.l3-name{font-family:var(--font-display);font-weight:600;font-size:.98rem;color:#fff}
.l3-role{color:var(--text-muted);font-size:.85rem}
.l3-round img{border-radius:var(--radius-lg);display:block}
.elementor-widget-icon .elementor-icon{color:var(--accent)}

/* L3 form */
.elementor-field-group>label{color:#c3c8d4;font-size:.8125rem;font-weight:500;margin-bottom:8px}
.elementor-field-group .elementor-field{background:#090c15;border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:8px;min-height:54px;padding:0 16px}
.elementor-field-group textarea.elementor-field{padding:12px 16px;min-height:110px}
.elementor-field-group .elementor-field::placeholder{color:#6b7280}
.elementor-field-type-acceptance .elementor-field-subgroup{color:#c3c8d4;font-size:.85rem}
.elementor-field-type-select .elementor-field{appearance:auto}
.l3-channel{background:#0e1220;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px 20px;transition:border-color .2s}
.l3-channel:hover{border-color:var(--accent)}

/* L3 form strong */
.elementor-form .elementor-field-group input.elementor-field,.elementor-form .elementor-field-group textarea.elementor-field,.elementor-form .elementor-field-group select.elementor-field,.elementor-form .elementor-field-group .elementor-select-wrapper select{background-color:#090c15!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:8px!important}
.elementor-form .elementor-field-group>label{color:#c3c8d4!important}
.elementor-form input.elementor-field::placeholder,.elementor-form textarea.elementor-field::placeholder{color:#6b7280!important}
.elementor-form .elementor-field-type-acceptance .elementor-field-subgroup,.elementor-form .elementor-field-type-acceptance label{color:#c3c8d4!important}

/* L3 mobile */
.l3-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border-radius:10px;border:1px solid var(--border-default);cursor:pointer;background:rgba(5,7,13,.4)}
.l3-burger span{display:block;width:20px;height:1.5px;background:#fff;margin:0 auto;transition:.25s}
.l3-burger-cb{display:none}
@media(max-width:900px){
 .l3-wp-header .l3-burger{display:flex}
 .l3-wp-header .main-nav{display:none;position:absolute;top:78px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--header-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:14px 20px 20px;border-bottom:1px solid var(--border-subtle)}
 .l3-wp-header .l3-burger-cb:checked ~ .main-nav{display:flex}
 .l3-wp-header .main-nav .nav-link{width:100%;justify-content:space-between;padding:12px 6px;font-size:1rem}
 .l3-wp-header .nav-dropdown{position:static;transform:none;width:100%;grid-template-columns:1fr;margin-top:0;background:transparent;border:none;box-shadow:none;padding:0 0 8px}
 .l3-wp-header .nav-item:hover .nav-dropdown{display:none}
 .l3-burger-cb:checked~.main-nav .nav-item .nav-dropdown{display:grid}
}
@media(max-width:767px){
 
 .e-con>.e-con-inner{padding-left:0;padding-right:0}
}

/* L3 mobile menu bg */
@media(max-width:900px){.l3-wp-header .main-nav{background:#070910!important;max-height:calc(100vh - 78px);overflow-y:auto;box-shadow:0 20px 40px -10px rgba(0,0,0,.6)}}

/* L3 a11y fixes (impeccable) */
/* hero text legibility: stronger scrim over video */
.elementor-background-overlay{background-color:rgba(1,2,4,0.66)!important}
[data-elementor-type] .e-con h1.elementor-heading-title,[data-elementor-type] .e-con h2.elementor-heading-title{text-shadow:0 2px 20px rgba(0,0,0,.55)}
/* service/stat cards: solid bg (no glass) so text meets AA contrast */
.svc-card,.stat-card,.card-service-lg{background:#0e1220!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:rgba(255,255,255,.12)!important}
.svc-card p,.card-service-lg p{color:#cfd4de!important}
/* undersized badge -> >=11px */
.svc-badge{font-size:.72rem!important}
/* avoid layout-thrash transitions */
.wa-fab,.wa-fab .wa-label{transition:transform .25s ease,opacity .25s ease!important}

/* L3 a11y fixes 2 (impeccable) */
/* darker hero scrim + readable eyebrow/subtitle over video */
.elementor-background-overlay{background-color:rgba(1,2,4,0.74)!important}
.e-con .l3-eyebrow{color:#dfe3ec}
[data-elementor-type] .e-con .elementor-widget-text-editor p{line-height:1.6}
.svc-card p,.card-service-lg p,.stat-card .label,.value-card p,.testimonial p{line-height:1.55!important}
[data-elementor-type] .e-con h1.elementor-heading-title{text-shadow:0 2px 24px rgba(0,0,0,.7)}

/* L3 mobile overflow fix */
html,body{overflow-x:clip}
@media(max-width:767px){
 .svc-grid,.grid-2,.grid-3{grid-template-columns:1fr!important}
 .grid-4{grid-template-columns:1fr 1fr!important}
 .svc-grid>*,.grid-2>*,.grid-3>*,.grid-4>*,.marquee-tile{min-width:0!important;max-width:100%}
 .card-service-lg{flex-wrap:wrap;gap:14px}
 .card-service-lg>*{min-width:0}
 .card-service-lg .arrow{display:none}
 [data-elementor-type="wp-page"] .e-con{max-width:100%!important}
 [data-elementor-type="wp-page"] > .e-con{padding-left:18px!important;padding-right:18px!important}
 
 .elementor-widget-html,.elementor-widget-html>*{max-width:100%}
}
@media(max-width:479px){ .grid-4{grid-template-columns:1fr!important} }
/* cookie banner never wider than screen */
.cookieadmin_consent_inside,.cookieadmin_law_container,.cookieadmin_bottom,#cookieadmin_consent{max-width:100vw!important;box-sizing:border-box!important}

/* L3 card+nebula fix */
/* card children never escape the card */
.svc-card,.svc-card>*{min-width:0}
.svc-card h3,.svc-card p,.svc-card .svc-rule{max-width:100%;overflow-wrap:anywhere}
.card-service-lg h3,.card-service-lg p{overflow-wrap:anywhere;min-width:0}
@media(max-width:767px){
 .card-service-lg{grid-template-columns:1fr!important;padding:22px!important;gap:10px!important;text-align:left}
 .card-service-lg>div{min-width:0}
 .section-tight{padding-left:0!important;padding-right:0!important}
 .svc-section .container{padding-left:0!important;padding-right:0!important}
}
/* home services section: restored animated nebula background behind cards */
#home-svc{position:relative;overflow:hidden;isolation:isolate}
#home-svc>*{position:relative;z-index:1}
#home-svc::before,#home-svc::after{content:"";position:absolute;z-index:0;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.45;pointer-events:none}
#home-svc::before{background:radial-gradient(circle,#16d62a,transparent 68%);top:-150px;left:-130px;animation:l3-drift-a 28s ease-in-out infinite alternate}
#home-svc::after{background:radial-gradient(circle,#6b5bd6,transparent 68%);bottom:-170px;right:-130px;animation:l3-drift-b 34s ease-in-out infinite alternate}
#home-svc .svc-card{background:rgba(14,18,32,.82)!important;-webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important}
@media(prefers-reduced-motion:reduce){#home-svc::before,#home-svc::after{animation:none}}

/* L3 card-lg block (mobile) */
@media(max-width:767px){
 .card-service-lg{display:block!important;overflow:visible!important;padding:22px!important}
 .card-service-lg>span.icon{margin-bottom:12px}
 .card-service-lg>div{width:100%!important;min-width:0!important}
 .card-service-lg h3,.card-service-lg p,.card-service-lg .l3-eyebrow{white-space:normal!important;max-width:100%!important;overflow-wrap:anywhere!important}
 .svc-card h3,.svc-card p{white-space:normal!important}
}

/* L3 spacing+menu v2 */
/* bigger gaps between service cards (home + solucoes) */
.svc-grid{gap:48px!important}
.section-tight{gap:44px!important}
@media(max-width:767px){ .svc-grid{gap:26px!important} .section-tight{gap:22px!important} }
/* mobile menu: full-screen glassmorphism */
@media(max-width:900px){
 .l3-wp-header .main-nav{position:fixed!important;top:76px;left:0;right:0;bottom:0;height:auto;max-height:none!important;background:rgba(7,10,18,0.8)!important;-webkit-backdrop-filter:blur(24px)!important;backdrop-filter:blur(24px)!important;overflow-y:auto;padding:28px 24px 56px!important;box-shadow:none!important;border-bottom:none!important}
 .l3-burger-cb:checked ~ .main-nav{display:flex!important}
 body:has(.l3-burger-cb:checked){overflow:hidden}
 .l3-wp-header .main-nav .nav-link{font-size:1.06rem;padding:14px 6px}
}

/* L3 outros-svc galaxy */
#outros-svc{position:relative;isolation:isolate}
#outros-svc::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(3,5,12,.82),rgba(3,5,12,.66) 40%,rgba(3,5,12,.86));pointer-events:none}
#outros-svc>*{position:relative;z-index:1}
#outros-svc .svc-card{background:rgba(14,18,32,.82)!important;-webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important}

/* L3 wrap+galaxy fix */
.svc-card,.svc-card h3,.svc-card p,.svc-card span:not(.svc-badge){white-space:normal!important}
.svc-badge{white-space:nowrap!important}
.card-service-lg,.card-service-lg h3,.card-service-lg p{white-space:normal!important}
.svc-grid{gap:44px!important}
@media(max-width:767px){.svc-grid{gap:24px!important}}
/* lighter galaxy scrim so the nebula shows */
#outros-svc::before{background:linear-gradient(180deg,rgba(3,5,12,.62),rgba(3,5,12,.42) 42%,rgba(3,5,12,.72))!important}
#outros-svc .svc-head h2,#outros-svc h2.elementor-heading-title{text-shadow:0 2px 18px rgba(0,0,0,.6)}

/* L3 menu containing-block fix */
@media(max-width:900px){
 .l3-wp-header,.l3-wp-header.is-scrolled,.site-header.is-scrolled{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(1,2,4,.92)!important}
 .l3-wp-header .main-nav{top:76px!important;bottom:0!important;height:auto!important;min-height:calc(100dvh - 76px)}
}

/* L3 post body */
.l3-featimg{margin:8px 0 34px}
.l3-featimg img{width:100%;height:auto;border-radius:var(--radius-lg);display:block}
.l3-postbody p,.elementor-widget-theme-post-content p{color:var(--text-secondary);font-size:1.1875rem;line-height:1.75;margin-bottom:22px}

/* L3 posts widget */
.elementor-posts .elementor-post{background:#0e1220;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;transition:transform .3s,border-color .3s}
.elementor-posts .elementor-post:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.16)}
.elementor-posts .elementor-post__thumbnail__link{aspect-ratio:16/10;display:block}
.elementor-posts .elementor-post__thumbnail img{width:100%;height:100%;object-fit:cover}
.elementor-posts .elementor-post__text{padding:22px 24px 26px}
.elementor-posts .elementor-post__title{margin:6px 0 10px}
.elementor-posts .elementor-post__title a{color:#fff;font-family:Poppins;font-weight:700;font-size:1.3rem;line-height:1.25}
.elementor-posts .elementor-post__meta-data{color:#8990a0;font-size:.82rem;margin-bottom:2px}
.elementor-posts .elementor-post__excerpt p{color:var(--text-secondary);font-size:.95rem;line-height:1.55}
.elementor-posts .elementor-post__read-more{color:var(--accent);font-family:Poppins;font-weight:600;font-size:.9rem}
.elementor-pagination{margin-top:44px;text-align:center;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.elementor-pagination .page-numbers{color:#c3c8d4;border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:8px 14px;font-family:Poppins;font-weight:600;text-decoration:none;transition:.2s}
.elementor-pagination .page-numbers.current{background:var(--accent);color:#04210a;border-color:var(--accent)}
.elementor-pagination .page-numbers:hover{border-color:var(--accent);color:#fff}

/* L3 post title white */
.elementor-posts .elementor-post__title a{color:#fff!important}
.elementor-posts .elementor-post__title a:hover{color:var(--accent)!important}

/* L3 header v3 */
.l3-wp-header{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid transparent!important;transition:background .3s,backdrop-filter .3s,border-color .3s}
.l3-wp-header.is-scrolled{background:rgba(5,7,13,.82)!important;-webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important;border-bottom-color:rgba(255,255,255,.08)!important}
@media(max-width:900px){
 .l3-wp-header .bar{padding-left:14px!important;padding-right:16px!important}
 .l3-wp-header .nav-cta{display:none!important}
 body:has(.l3-burger-cb:checked) .l3-wp-header{background:rgba(3,5,12,.97)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* L3 bar fullwidth */
.l3-wp-header .bar{width:100%!important;box-sizing:border-box}
[data-elementor-type="header"] .elementor-widget-html>.elementor-widget-container{width:100%!important}
[data-elementor-type="header"] .e-con-inner,[data-elementor-type="header"]>.e-con-inner{width:100%!important;max-width:100%!important}

/* L3V4-START */

/* =========================================================================
   L3 v4 — partículas, menu, vidro, movimento
   ========================================================================= */

/* --- 1. FlowField: seções com fundo de partículas ----------------------- */
#qs-valores,#crm-recursos{position:relative;overflow:hidden;isolation:isolate;background:#05060c!important}
#qs-valores>*:not(.flowfield-canvas),#crm-recursos>*:not(.flowfield-canvas){position:relative;z-index:1}
.flowfield-canvas{position:absolute!important;inset:0;z-index:0;pointer-events:none;display:block}
#qs-valores::after,#crm-recursos::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 74% 68% at 50% 46%,transparent 26%,rgba(5,6,12,.88) 100%)}

/* --- 2. Glassmorphism: cards mais translúcidos ------------------------- */
.value-card{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.022))!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%)!important;backdrop-filter:blur(20px) saturate(150%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.10)!important}
.value-card:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035))!important;
  border-color:color-mix(in srgb,var(--hue) 55%,transparent)!important}
.value-card p{color:#dfe4ee!important}
.stat-card{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.022))!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%)!important;backdrop-filter:blur(18px) saturate(150%)!important;
  border:1px solid rgba(255,255,255,.13)!important}
.svc-card,#home-svc .svc-card,#outros-svc .svc-card{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(20,26,44,.34))!important;
  -webkit-backdrop-filter:blur(16px) saturate(145%)!important;backdrop-filter:blur(16px) saturate(145%)!important;
  border:1px solid rgba(255,255,255,.13)!important}
.svc-card:hover,#home-svc .svc-card:hover,#outros-svc .svc-card:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(20,26,44,.42))!important}
.svc-card p{color:#dbe0ea!important;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.svc-card h3{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.card-service-lg{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(20,26,44,.42))!important;
  -webkit-backdrop-filter:blur(16px) saturate(145%)!important;backdrop-filter:blur(16px) saturate(145%)!important;
  border:1px solid rgba(255,255,255,.12)!important}
.card-service-lg p{color:#dbe0ea!important}
.crm-step{
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02))!important;
  -webkit-backdrop-filter:blur(16px) saturate(145%);backdrop-filter:blur(16px) saturate(145%);
  border:1px solid rgba(255,255,255,.12)!important}
.l3-channel,.elementor-posts .elementor-post{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018))!important;
  -webkit-backdrop-filter:blur(16px) saturate(145%);backdrop-filter:blur(16px) saturate(145%);
  border:1px solid rgba(255,255,255,.12)!important}

/* --- 3. CRM: traço de cada indicador com a sua propria cor ---------------- */
/* Este bloco forcava var(--accent) nos quatro tracos do CRM, entao todos saiam verdes.
   Sem ele valem os hues por nth-child (linhas ~2236), iguais aos de Quem Somos. */

/* --- 4. Menu desktop: hover verde + barra full width -------------------- */
/* barra ocupa a largura inteira da tela; o conteúdo continua centralizado em 1200px */
.l3-wp-header{width:100%!important;max-width:none!important;margin:0!important;left:0!important;right:0!important}
.l3-wp-header .bar{max-width:1200px;margin:0 auto}
.l3-wp-header.is-scrolled{
  background:rgba(5,7,13,.66)!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%)!important;backdrop-filter:blur(18px) saturate(140%)!important;
  border-bottom-color:rgba(255,255,255,.08)!important}
[data-elementor-type="header"]>.e-con,[data-elementor-type="header"] .e-con-inner{
  width:100%!important;max-width:100%!important;padding-left:0!important;padding-right:0!important}
.nav-item-row{display:inline-flex;align-items:center;gap:0}
.nav-sub-toggle{background:none;border:none;cursor:pointer;color:var(--text-secondary);
  padding:6px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;
  transition:color .2s,background .2s,border-color .2s}
.l3-burger{align-items:center;padding:0}
@media(min-width:901px){
  .l3-wp-header .nav-link:hover,.l3-wp-header .nav-link:focus-visible{
    color:var(--accent)!important;background:rgba(22,214,42,.10)}
  .l3-wp-header .nav-item:hover .nav-link,.l3-wp-header .nav-item:hover .nav-sub-toggle{color:var(--accent)!important}
  .l3-wp-header .nav-item:hover .nav-item-row{background:rgba(22,214,42,.10);border-radius:9px}
  .l3-wp-header .nav-dropdown-item:hover{background:rgba(22,214,42,.10)}
  .l3-wp-header .nav-dropdown-item:hover .t{color:var(--accent)}
  .nav-sub-toggle{pointer-events:none;margin-left:-8px}
  .l3-menu-head,.l3-nav-contato{display:none!important}
}

/* --- 5. Menu mobile: tela cheia, logo dentro, botão fechar -------------- */
@media(max-width:900px){
  .l3-wp-header .l3-burger{display:flex}
  .l3-wp-header .main-nav{
    display:none!important;position:fixed!important;top:0!important;left:0;right:0;bottom:0!important;
    z-index:200;height:auto!important;max-height:none!important;min-height:100dvh;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(5,7,13,.9)!important;
    -webkit-backdrop-filter:blur(26px) saturate(150%)!important;backdrop-filter:blur(26px) saturate(150%)!important;
    padding:0 22px 64px!important;overflow-y:auto;overscroll-behavior:contain;
    border:none!important;box-shadow:none!important}
  body.l3-menu-open .l3-wp-header .main-nav{display:flex!important}
  body.l3-menu-open{overflow:hidden}
  .l3-wp-header .l3-menu-head{
    display:flex!important;align-items:center;justify-content:space-between;gap:16px;
    position:sticky;top:0;z-index:2;padding:15px 0 16px;margin-bottom:10px;
    background:linear-gradient(180deg,rgba(5,7,13,.98),rgba(5,7,13,.82));
    border-bottom:1px solid rgba(255,255,255,.09)}
  .l3-menu-logo{display:block;flex-shrink:0}
  .l3-menu-logo img{height:44px;width:auto;display:block}
  .l3-menu-close{
    width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;
    transition:background .2s,border-color .2s,color .2s}
  .l3-menu-close:hover,.l3-menu-close:focus-visible{
    background:rgba(22,214,42,.16);border-color:var(--accent);color:var(--accent)}
  .l3-wp-header .main-nav .nav-link{
    width:100%;justify-content:flex-start;padding:16px 4px;font-size:1.06rem;color:#e8ebf2;
    border-bottom:1px solid rgba(255,255,255,.07);border-radius:0}
  .l3-wp-header .main-nav .nav-link:hover{color:var(--accent)}
  .l3-wp-header .main-nav .nav-item{width:100%;position:relative}
  .l3-wp-header .main-nav .nav-item-row{
    display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .l3-wp-header .main-nav .nav-item-row .nav-link{border-bottom:none;flex:1 1 auto}
  .l3-wp-header .nav-sub-toggle{
    width:46px;height:46px;flex-shrink:0;border-radius:12px;
    border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;pointer-events:auto}
  .l3-wp-header .nav-sub-toggle svg{width:18px;height:18px;transition:transform .28s var(--ease-out)}
  .l3-wp-header .nav-item.is-open .nav-sub-toggle{
    color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:rgba(22,214,42,.12)}
  .l3-wp-header .nav-item.is-open .nav-sub-toggle svg{transform:rotate(180deg)}
  .l3-wp-header .nav-dropdown{
    display:none!important;position:static;transform:none;width:100%;max-width:none;
    grid-template-columns:1fr;margin:0;background:transparent;border:none;box-shadow:none;padding:8px 0 12px;gap:2px}
  .l3-wp-header .nav-item:hover .nav-dropdown,.l3-wp-header .nav-dropdown:hover{display:none!important}
  .l3-wp-header .nav-item.is-open .nav-dropdown{display:grid!important}
  .l3-wp-header .nav-dropdown-item{padding:12px 8px}
  .l3-nav-contato{display:flex!important}
  .l3-wp-header .nav-cta{display:none!important}
}

/* --- 6. Movimento de entrada (fade-in) em todo o site ------------------ */
/* Base: sobe e aparece. O !important existe porque o Elementor declara
   transition nos próprios widgets e venceria por especificidade; o JS remove
   .l3-rv ~950ms depois da entrada, devolvendo as transições de hover. */
.l3-rv{
  transition:opacity .85s cubic-bezier(.16,.84,.3,1),
             transform .85s cubic-bezier(.16,.84,.3,1),
             filter .85s cubic-bezier(.16,.84,.3,1)!important;
  will-change:opacity,transform}
.l3-rv:not(.l3-in){opacity:0;transform:translateY(22px)}
.l3-rv.l3-in{opacity:1;transform:none;filter:none}

/* Títulos entram com um leve desfoque - dá peso sem custar performance */
.elementor-widget-heading.l3-rv:not(.l3-in){filter:blur(6px);transform:translateY(24px)}

/* Texto corrido: mais discreto que os títulos */
.elementor-widget-text-editor.l3-rv:not(.l3-in),
.elementor-widget-icon-list.l3-rv:not(.l3-in){transform:translateY(16px)}

/* Botões: sobem menos e crescem de leve */
.elementor-widget-button.l3-rv:not(.l3-in){transform:translateY(14px) scale(.98)}

/* Mídia e cards: percurso um pouco maior e escala sutil */
.elementor-widget-image.l3-rv:not(.l3-in),
.elementor-widget-video.l3-rv:not(.l3-in),
.l3-slider.l3-rv:not(.l3-in),
.elementor-widget-html.l3-rv:not(.l3-in){transform:translateY(28px) scale(.986)}
.svc-card.l3-rv:not(.l3-in),
.value-card.l3-rv:not(.l3-in),
.stat-card.l3-rv:not(.l3-in),
.crm-step.l3-rv:not(.l3-in),
.card-service-lg.l3-rv:not(.l3-in),
.l3-channel.l3-rv:not(.l3-in),
.elementor-posts .elementor-post.l3-rv:not(.l3-in){transform:translateY(26px) scale(.985)}

/* Itens de lista e perguntas do FAQ: deslizam de lado, bem de leve */
.feature-item.l3-rv:not(.l3-in),
.l3-faq details.l3-rv:not(.l3-in){transform:translateY(12px)}

/* Hover continua vivo depois que a entrada termina */
.l3btn .elementor-button{transition:background .2s,transform .3s cubic-bezier(.16,.84,.3,1),box-shadow .3s}
.l3btn .elementor-button:hover{transform:translateY(-3px)}
.nav-cta{transition:background .2s,transform .25s cubic-bezier(.16,.84,.3,1),box-shadow .25s}
.nav-cta:hover{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .l3-rv,.l3-rv:not(.l3-in){opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .l3btn .elementor-button:hover,.nav-cta:hover{transform:none}}

/* --- 7. Home: grade de serviços 3+3 e fundo de galáxia ------------------ */
/* fundo de galáxia (imagem no container) + véu escuro; blobs desligados aqui */
#home-svc::after{display:none!important}
#home-svc::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:0!important;
  width:auto!important;height:auto!important;border-radius:0!important;filter:none!important;
  opacity:1!important;animation:none!important;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,5,12,.66),rgba(3,5,12,.44) 42%,rgba(3,5,12,.76))!important}
#home-svc h2.elementor-heading-title,#home-svc .elementor-widget-text-editor{text-shadow:0 2px 16px rgba(0,0,0,.65)}
#home-svc .svc-grid{grid-template-columns:repeat(3,1fr)!important;gap:26px!important}
@media(max-width:1080px){#home-svc .svc-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:820px){#home-svc .svc-grid{grid-template-columns:repeat(2,1fr)!important;gap:18px!important}}
@media(max-width:560px){#home-svc .svc-grid{grid-template-columns:1fr!important;gap:22px!important}}
#home-svc>.l3-galaxy,#outros-svc>.l3-galaxy{position:absolute;inset:0;z-index:0;pointer-events:none}

/* Nebulosa suave nas seções que ficavam sem nada (sem exagero) */
.l3-neb,#home-vitrine,#home-depo,#home-cta,#qs-stats,#crm-steps,#crm-cta{position:relative;overflow:hidden;isolation:isolate}
.l3-neb>*,#home-vitrine>*,#home-depo>*,#home-cta>*,#qs-stats>*,#crm-steps>*,#crm-cta>*{position:relative;z-index:1}
.l3-neb::before,.l3-neb::after,#home-vitrine::before,#home-vitrine::after,#home-depo::before,#home-depo::after,#home-cta::before,#home-cta::after,#qs-stats::before,#qs-stats::after,#crm-steps::before,#crm-steps::after,#crm-cta::before,#crm-cta::after{content:"";position:absolute;z-index:0;width:460px;height:460px;
  border-radius:50%;filter:blur(100px);opacity:.24;pointer-events:none}
.l3-neb::before,#home-vitrine::before,#home-depo::before,#home-cta::before,#qs-stats::before,#crm-steps::before,#crm-cta::before{background:radial-gradient(circle,#16d62a,transparent 68%);top:-170px;left:-140px;
  animation:l3-drift-a 30s ease-in-out infinite alternate}
.l3-neb::after,#home-vitrine::after,#home-depo::after,#home-cta::after,#qs-stats::after,#crm-steps::after,#crm-cta::after{background:radial-gradient(circle,#6b5bd6,transparent 68%);bottom:-180px;right:-140px;
  animation:l3-drift-b 36s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.l3-neb::before,.l3-neb::after,#home-vitrine::before,#home-vitrine::after,#home-depo::before,#home-depo::after,#home-cta::before,#home-cta::after,#qs-stats::before,#qs-stats::after,#crm-steps::before,#crm-steps::after,#crm-cta::before,#crm-cta::after{animation:none}}

/* --- 8. Mobile: mais respiro no topo das seções ------------------------- */
@media(max-width:767px){
  
  
  #home-svc .svc-grid{gap:24px!important}
}

/* --- 9. FAQ (conteúdo de SEO + conversão) ------------------------------ */
.l3-faq-head{text-align:center;max-width:780px;margin:0 auto 40px}
.l3-faq{display:grid;gap:14px;max-width:920px;margin:0 auto}
.l3-faq details{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:0 24px;
  -webkit-backdrop-filter:blur(16px) saturate(145%);backdrop-filter:blur(16px) saturate(145%);
  transition:border-color .25s,background .25s}
.l3-faq details[open]{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03))}
.l3-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:21px 0}
.l3-faq summary::-webkit-details-marker{display:none}
.l3-faq summary h3{font-family:var(--font-display);font-weight:600;font-size:1.06rem;line-height:1.35;
  color:#fff;margin:0;text-transform:none;letter-spacing:0}
.l3-faq summary::after{content:"";width:11px;height:11px;flex-shrink:0;
  border-right:2.4px solid var(--accent);border-bottom:2.4px solid var(--accent);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease-out)}
.l3-faq details[open] summary::after{transform:rotate(225deg) translateY(2px)}
.l3-faq summary:hover h3{color:var(--accent)}
.l3-faq details p{margin:0;padding:0 0 23px;color:var(--text-secondary);font-size:1rem;line-height:1.68}
@media(max-width:767px){
  .l3-faq summary h3{font-size:.98rem}
  .l3-faq details{padding:0 18px}
  .l3-faq details p{font-size:.95rem}}

/* --- 10. Corpo do post: respiro nos subtítulos e links visíveis --------- */
.elementor-widget-theme-post-content h2,.l3-postbody h2{
  font-size:2rem;line-height:1.16;margin:48px 0 18px;text-transform:none;color:#fff}
.elementor-widget-theme-post-content h3,.l3-postbody h3{
  font-size:1.4rem;line-height:1.25;margin:34px 0 12px;text-transform:none;color:#fff}
.elementor-widget-theme-post-content p a,.l3-postbody p a{
  color:var(--accent);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);transition:text-decoration-color .2s}
.elementor-widget-theme-post-content p a:hover,.l3-postbody p a:hover{text-decoration-color:var(--accent)}
.elementor-widget-theme-post-content strong{color:#fff}
.l3-faq p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media(max-width:767px){
  .elementor-widget-theme-post-content h2,.l3-postbody h2{font-size:1.55rem;margin:36px 0 14px}
  .elementor-widget-theme-post-content h3,.l3-postbody h3{font-size:1.2rem;margin:26px 0 10px}}

/* --- 11. Slider de serviços -------------------------------------------- */
.l3-slider{position:relative}
.l3-track{
  position:relative;display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  padding:18px 2px 26px;margin:0;list-style:none;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.l3-track::-webkit-scrollbar{display:none}
.l3-track>.svc-card{
  scroll-snap-align:start;flex:0 0 calc((100% - 72px)/4);min-width:0;
  transition:transform .35s var(--ease-out),border-color .3s,box-shadow .35s,opacity .35s}
@media(max-width:1180px){.l3-track>.svc-card{flex-basis:calc((100% - 48px)/3)}}
@media(max-width:860px){.l3-track{gap:18px}.l3-track>.svc-card{flex-basis:calc((100% - 18px)/2)}}
@media(max-width:600px){
  /* 1 card centralizado, com os vizinhos espiando nas laterais */
  .l3-track{gap:14px;padding-left:0;padding-right:0;scroll-padding:0}
  .l3-track>.svc-card{flex-basis:74%;scroll-snap-align:center}
  .l3-track::before,.l3-track::after{content:"";flex:0 0 13%}
  .l3-track>.svc-card{opacity:.5;transform:scale(.94)}
  .l3-track>.svc-card.is-current{opacity:1;transform:none}
}
.l3-slider-ui{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px}
.l3-sl-btn{
  width:44px;height:44px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;
  transition:background .2s,border-color .2s,color .2s,transform .2s}
.l3-sl-btn:hover{background:rgba(22,214,42,.16);border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.l3-dots{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.l3-dot{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;border:none;
  background:rgba(255,255,255,.24);transition:background .25s,width .25s}
.l3-dot.is-active{background:var(--accent);width:26px;border-radius:999px;box-shadow:0 0 14px -2px var(--accent)}
@media(max-width:600px){.l3-sl-btn{width:40px;height:40px}.l3-slider-ui{gap:12px}}
@media(prefers-reduced-motion:reduce){
  .l3-track{scroll-behavior:auto}
  .l3-track>.svc-card{opacity:1!important;transform:none!important}}

/* --- 12. Submenu mobile em tela cheia sobre o menu ---------------------- */
@media(max-width:900px){
  .l3-wp-header .nav-item.is-open .nav-dropdown{
    display:grid!important;position:fixed!important;inset:0!important;z-index:240;
    grid-template-columns:1fr;align-content:start;gap:4px;
    background:rgba(4,6,13,.97)!important;
    -webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);
    padding:0 22px 64px!important;overflow-y:auto;overscroll-behavior:contain;
    animation:l3-sub-in .26s var(--ease-out)}
  .l3-sub-head{
    display:flex!important;align-items:center;justify-content:space-between;gap:16px;
    position:sticky;top:0;z-index:2;padding:18px 0 16px;margin-bottom:8px;
    background:linear-gradient(180deg,rgba(4,6,13,.99),rgba(4,6,13,.86));
    border-bottom:1px solid rgba(255,255,255,.09)}
  .l3-sub-title{
    font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:#fff;
    letter-spacing:.01em}
  .l3-sub-close{
    display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0;
    padding:10px 18px 10px 12px;border-radius:999px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;
    font-family:var(--font-display);font-weight:600;font-size:.92rem;
    transition:background .2s,border-color .2s,color .2s}
  .l3-sub-close:hover,.l3-sub-close:focus-visible{
    background:rgba(22,214,42,.16);border-color:var(--accent);color:var(--accent)}
  .l3-wp-header .nav-item.is-open .nav-dropdown-item{padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.05)}
  /* enquanto o submenu está por cima, o resto do menu não recebe toque */
  body.l3-sub-open .l3-wp-header .main-nav>a,
  body.l3-sub-open .l3-wp-header .l3-menu-head,
  body.l3-sub-open .l3-wp-header .nav-item-row{pointer-events:none}
}
.l3-sub-head{display:none}
@keyframes l3-sub-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .l3-wp-header .nav-item.is-open .nav-dropdown{animation:none}}

/* --- 13. Iluminação de fundo nas seções sem fundo próprio -------------- */
[id^="neb-"]{position:relative;overflow:hidden;isolation:isolate}
[id^="neb-"]>*{position:relative;z-index:1}
[id^="neb-"]::before,[id^="neb-"]::after{
  content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  width:520px;height:520px;filter:blur(110px);opacity:.20}
[id^="neb-"]::before{background:radial-gradient(circle,#16d62a,transparent 68%);
  top:-190px;left:-150px;animation:l3-drift-a 32s ease-in-out infinite alternate}
[id^="neb-"]::after{background:radial-gradient(circle,#6b5bd6,transparent 68%);
  bottom:-200px;right:-150px;animation:l3-drift-b 38s ease-in-out infinite alternate}
[id^="neb-b-"]::before{background:radial-gradient(circle,#6b5bd6,transparent 68%)}
[id^="neb-b-"]::after{background:radial-gradient(circle,#06b6d4,transparent 68%)}
[id^="faq-"]{position:relative;overflow:hidden;isolation:isolate}
[id^="faq-"]>*{position:relative;z-index:1}
[id^="faq-"]::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:620px;height:620px;border-radius:50%;filter:blur(120px);opacity:.16;
  background:radial-gradient(circle,#16d62a,transparent 68%);
  top:-220px;left:50%;margin-left:-310px;animation:l3-drift-a 34s ease-in-out infinite alternate}
@media(max-width:767px){
  [id^="neb-"]::before,[id^="neb-"]::after{width:340px;height:340px;filter:blur(80px)}
  [id^="faq-"]::before{width:380px;height:380px;filter:blur(90px);margin-left:-190px}}
@media(prefers-reduced-motion:reduce){
  [id^="neb-"]::before,[id^="neb-"]::after,[id^="faq-"]::before{animation:none}}

/* L3V4-END */
/* L3ICONS-START */
.l3-wp-header .nav-ic{display:none}
@media(max-width:900px){
  .l3-wp-header .main-nav .nav-link{display:flex!important;align-items:center;gap:14px}
  .l3-wp-header .nav-ic{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);color:var(--nic,#16d62a);transition:background .2s,border-color .2s}
  .l3-wp-header .nav-ic svg{width:20px;height:20px;display:block}
  .l3-wp-header .nav-tx{flex:1 1 auto;min-width:0}
  .l3-wp-header .main-nav .nav-link:hover .nav-ic,.l3-wp-header .main-nav .nav-link:focus-visible .nav-ic{background:rgba(255,255,255,.09);border-color:var(--nic,#16d62a)}
  .l3-wp-header .main-nav .nav-item-row{align-items:center}
  .l3-wp-header .l3-menu-close{padding:0;margin:0;line-height:0;-webkit-appearance:none;appearance:none;align-self:center}
  .l3-wp-header .l3-menu-close svg{display:block;width:22px;height:22px;margin:0}
  .l3-wp-header .l3-sub-close svg{display:block;flex:0 0 auto}
}
/* L3ICONS-END */
/* L3ROCKET-START */
@property --l3ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes l3-ring{to{--l3ang:360deg}}
/* fundo de ondas verde/violeta na secao de depoimentos */
#home-depo{position:relative;background-color:#05060d;background-image:url(/wp-content/uploads/l3/l3-flow-bg.webp);background-size:cover;background-position:center center;background-repeat:no-repeat}
/* secao do foguete (home usa #home-cta; demais paginas usam id l3rk-sec-*) */
#home-cta,[id^="l3rk-sec"]{position:relative;overflow:hidden;isolation:isolate;background-color:#010204}
#home-cta::before,#home-cta::after,[id^="l3rk-sec"]::before,[id^="l3rk-sec"]::after{display:none!important}
#home-cta>.l3-rocket,[id^="l3rk-sec"]>.l3-rocket{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .7s ease}
#home-cta.l3-rocket-on>.l3-rocket,[id^="l3rk-sec"].l3-rocket-on>.l3-rocket{opacity:1}
#home-cta>.l3-rocket canvas,[id^="l3rk-sec"]>.l3-rocket canvas{display:block;width:100%;height:100%}
#home-cta>*:not(.l3-rocket),[id^="l3rk-sec"]>*:not(.l3-rocket){position:relative;z-index:1}
/* card de vidro quase transparente, sem sombra e sem borda estatica */
[id^="l3rk-card"]{--l3ang:0deg;position:relative;overflow:visible;border:0;border-radius:18px;box-shadow:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
[id^="l3rk-card"]>*{position:relative;z-index:2}
/* halo suave girando junto com a borda */
[id^="l3rk-card"]::before{content:'';position:absolute;inset:-16px;border-radius:32px;z-index:0;pointer-events:none;background:conic-gradient(from var(--l3ang),rgba(167,94,204,0) 0deg,rgba(167,94,204,.55) 55deg,rgba(137,70,189,.55) 130deg,rgba(137,70,189,0) 200deg,rgba(167,94,204,0) 360deg);filter:blur(20px);opacity:.22;animation:l3-ring 9s linear infinite}
/* fio de 1px da borda, girando */
[id^="l3rk-card"]::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;padding:1px;background:conic-gradient(from var(--l3ang),rgba(167,94,204,.28) 0deg,rgba(167,94,204,.95) 55deg,rgba(137,70,189,.95) 125deg,rgba(167,94,204,.28) 195deg,rgba(167,94,204,.28) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:l3-ring 9s linear infinite}
[id^="l3rk-card"] .elementor-heading-title{text-shadow:0 2px 20px rgba(1,2,4,.75)}
[id^="l3rk-card"] p{text-shadow:0 1px 14px rgba(1,2,4,.7)}
@media (max-width:767px){[id^="l3rk-card"]{border-radius:16px;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}[id^="l3rk-card"]::before{inset:-11px;border-radius:27px}}
@media (prefers-reduced-motion:reduce){[id^="l3rk-card"]::before,[id^="l3rk-card"]::after{animation:none}}
/* L3ROCKET-END */

/* Hero scroll-frames -----------------------------------------------------------------
   A secao vira uma pista alta e o palco (container interno, boxed) fica sticky.
   O canvas e full-bleed dentro do palco; o JS so liga .is-scrollframes quando os
   quadros carregam, entao sem JS / reduced-motion o hero em video continua valendo. */
.l3-hero-track.is-scrollframes { min-height: 300vh !important; }
.l3-hero-track.is-scrollframes > .l3-hero-stage {
  position: sticky; top: 0; min-height: 100vh; justify-content: center;
}
.l3-hero-canvas-w {
  display: none;
  position: absolute !important; top: 0; left: 50%;
  width: 100vw !important; max-width: 100vw !important; height: 100%;
  transform: translateX(-50%); margin: 0 !important; padding: 0 !important;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.l3-hero-track.is-scrollframes .l3-hero-canvas-w { display: block; }
.l3-hero-canvas-w .elementor-widget-container { height: 100%; }
.l3-hero-canvas-wrap { position: absolute; inset: 0; overflow: hidden; }
canvas.l3-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.l3-hero-canvas-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(1,2,4,0.34) 0%, rgba(1,2,4,0.16) 40%, #010204 100%);
}
/* Conteudo acima do canvas; some junto com o ultimo quadro. */
.l3-hero-stage > *:not(.l3-hero-canvas-w) { position: relative; z-index: 2; }
.l3-hero-track.is-scrollframes .l3-hero-stage > *:not(.l3-hero-canvas-w) {
  opacity: var(--l3-hero-text-op, 1);
  transform: translateY(var(--l3-hero-text-shift, 0px));
}
@media (max-width: 640px) {
  .l3-hero-track.is-scrollframes { min-height: 220vh !important; }
}

.l3-hero-track.is-scrollframes{padding-top:0 !important;padding-bottom:0 !important}
.l3-hero-track.is-scrollframes > .l3-hero-stage > .e-con-inner{min-height:100vh;justify-content:center;position:relative}

.l3-hero-track.is-scrollframes{justify-content:flex-start !important;align-items:stretch !important}

/* L3HERO2-START */
/* 1) O video de fundo do Elementor pintava POR CIMA do canvas da sequencia
      (dava pra ver o texto do hero fantasma atras dele). Com os quadros
      ligados o video nao serve pra nada: some. */
.l3-hero-track.is-scrollframes .elementor-background-video-container,
.l3-hero-track.is-scrollframes .elementor-background-video-embed,
.l3-hero-track.is-scrollframes > .elementor-background-overlay{display:none!important}
.l3-hero-track.is-scrollframes{background-image:none!important;background-color:#010204!important}

/* 2) Pista e palco medem exatamente a viewport: o JS calcula o progresso com
      offsetHeight e qualquer padding fazia o palco escorregar antes do fim. */
.l3-hero-track.is-scrollframes > .l3-hero-stage{height:100vh;min-height:100vh;max-height:100vh;overflow:hidden}
.l3-hero-track.is-scrollframes > .l3-hero-stage > .e-con-inner{height:100%;min-height:0}

/* 3) O widget do canvas e filho de .e-con-inner, NAO do palco. A regra antiga
      aplicava o fade e o deslocamento do texto no .e-con-inner inteiro, entao o
      canvas desaparecia junto no fim do scroll (tela preta / video aparecendo).
      O fade agora vai so nos widgets de texto; o canvas fica firme por baixo. */
.l3-hero-track.is-scrollframes > .l3-hero-stage > .e-con-inner{opacity:1!important;transform:none!important}
.l3-hero-track.is-scrollframes > .l3-hero-stage > .e-con-inner > .elementor-element:not(.l3-hero-canvas-w){
  position:relative;z-index:2;
  opacity:var(--l3-hero-text-op,1);
  transform:translateY(var(--l3-hero-text-shift,0px))}
.l3-hero-canvas-w{z-index:1!important}

/* 4) Mobile: [data-elementor-type=wp-page]>.e-con:first-child{padding-top:150px}
      vencia por especificidade e empurrava o palco 150px pra baixo - no topo
      aparecia uma faixa do video com emenda visivel no primeiro scroll. */
[data-elementor-type="wp-page"] > .e-con.l3-hero-track.is-scrollframes{padding-top:0!important;padding-bottom:0!important}
/* L3HERO2-END */

/* L3BENTO-START */
/* Bento das paginas de servico (referencia enviada pelo cliente): foto grande em
   P&B, bloco solido de acento com a tipografia, tile do icone. Um acento so. */
.svc-media{display:grid;grid-template-columns:1.72fr 1fr;grid-template-rows:1.25fr 1fr;gap:12px;aspect-ratio:16/10;margin:0 0 28px}
.svc-media .tile{position:relative;border-radius:20px;overflow:hidden;min-width:0}
.svc-media .photo{grid-row:span 2;border:1px solid rgba(255,255,255,.09);isolation:isolate;background:#05060d}
.svc-media .photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.1) brightness(.92)}
/* duotone leve: so um respiro do verde da marca, a foto continua lendo P&B */
.svc-media .photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:#16d62a;mix-blend-mode:color;opacity:.09}
.svc-media .tag-tile{background:#16d62a;color:#04210a;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px}
.svc-media .tag-tile .l3-eyebrow{color:rgba(4,33,10,.62);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0;line-height:1.2}
.svc-media .tag-tile b{font-family:"Poppins",system-ui,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.98;
  font-size:clamp(.92rem,1.55vw,1.35rem);overflow-wrap:normal;word-break:keep-all;hyphens:none}
.svc-media .ic-tile{background:#0e1220;border:1px solid rgba(255,255,255,.09);display:grid;place-items:center;color:var(--hue,#16d62a)}
.svc-media .ic-tile svg{width:52px;height:52px}
@media(max-width:720px){
  /* empilha: foto larga em cima, acento + icone lado a lado embaixo, altura pelo conteudo */
  .svc-media{grid-template-columns:1.55fr 1fr;grid-template-rows:auto auto;aspect-ratio:auto;gap:10px}
  .svc-media .photo{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  .svc-media .tag-tile{min-height:92px;padding:14px 16px}
  .svc-media .tag-tile b{font-size:1.02rem}
  .svc-media .ic-tile{min-height:92px}
  .svc-media .ic-tile svg{width:40px;height:40px}
}
/* L3BENTO-END */

/* L3BENTOPAD-START */
/* No mobile a coluna do bento perdia 156px em 4 niveis de padding de container
   (390 > 354 > 314 > 274 > 234). O culpado e a regra global
   [data-elementor-type="wp-page"] .e-con{padding-left:20px!important} (0,2,0), que
   ganha de qualquer seletor de id sozinho - por isso o padding_mobile nativo e o
   [id^="svcpad-"] simples nao valiam nada. Aqui a especificidade sobe pra (0,3,0). */
@media(max-width:767px){
  [data-elementor-type="wp-page"] .e-con[id^="svcpad-"]{padding-left:0!important;padding-right:0!important}
}
/* L3BENTOPAD-END */





/* L3FOOT-START */
/* Rodape no mobile: as 4 colunas viravam 2 mas mantinham padding 32px e gap 40px,
   entao cada coluna ficava com 133px de 390 e todo rotulo quebrava em duas linhas. */
@media(max-width:767px){
  .site-footer .cols{grid-template-columns:1fr 1fr;gap:28px 18px;padding:48px 18px 32px}
  .site-footer .brand-col{grid-column:1/-1}
}
/* L3FOOT-END */

/* L3SPACE-START */
/* Escala de espacamento (base 4). O ritmo VERTICAL entre secoes vive no padding de
   cada secao (dado do Elementor, nao CSS): 192px normal e 128px para pares colados
   no desktop; 120/80 no mobile. Aqui fica o ritmo INTERNO. */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px}

/* Gap padrao dos containers: 20px do Elementor -> 24px da escala. Isso define
   apenas o *default*: containers com gap proprio (0,3,0) continuam vencendo. */
[data-elementor-type="wp-page"] .e-con{--row-gap:24px;--column-gap:24px}

/* Proximidade: o eyebrow e parte do titulo, nao um irmao de mesmo peso.
   Fecha o intervalo de 24px para ~12px sem mexer no gap dos outros irmaos. */
[data-elementor-type="wp-page"] .elementor-widget:has(> .l3-eyebrow){margin-bottom:-12px}

/* Medida de leitura: o detector achou linhas de ~109 caracteres. */
[data-elementor-type="wp-page"] p,[data-elementor-type="wp-page"] li{max-width:62ch}
[data-elementor-type="wp-page"] .text-center p,
[data-elementor-type="wp-page"] [style*="text-align:center"] p{margin-left:auto;margin-right:auto}

/* Botoes: as alturas variavam 57/58/59/60/76px porque cada widget trazia o proprio
   padding vertical. Altura unica + centralizacao por flex; o padding horizontal
   continua por widget (rotulos tem tamanhos diferentes). */
.elementor-button,.l3btn{height:58px!important;min-height:58px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  padding-top:0!important;padding-bottom:0!important;line-height:1.1}
.elementor-button .elementor-button-content-wrapper{align-items:center}
@media(max-width:767px){.elementor-button,.l3btn{height:54px!important;min-height:54px}}

/* Bento: o titulo estourava o bloco de acento em 27px (detector: text-overflow). */
.svc-media .tag-tile b{font-size:clamp(.85rem,1.2vw,1.12rem);overflow-wrap:break-word;word-break:normal}
/* L3SPACE-END */

/* L3LIST-START */
/* Listas de checagem no mobile: os itens vinham com margin 0 e align-items:center,
   entao quando o texto quebrava em duas linhas os itens colavam e o bloco virava um
   paragrafo so, com o check no meio da segunda linha. Precisa da especificidade cheia
   do Elementor (.widget .items .item) para vencer o padrao do widget. */
@media(max-width:767px){
  .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item{
    align-items:flex-start!important;margin-bottom:14px!important;line-height:1.45}
  .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item:last-child{margin-bottom:0!important}
  .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-icon{margin-top:5px}
  .feature-item{align-items:flex-start;gap:12px}
}
/* L3LIST-END */

/* L3RKSIZE-START */
/* O quadro do foguete e 1280x624 (2,05). As secoes tinham 480-613px de altura em
   1440 de largura (proporcao 2,4-3,0), entao o "cover" cortava de 13% a 32% da cena
   na vertical - o foguete saia do quadro no meio do scroll. Altura minima proxima da
   proporcao do quadro + zoom:1 no JS (cabe inteiro, com as tarjas esfumadas). */
#home-cta,[id^="l3rk-sec"]{min-height:clamp(560px,49vw,820px)}
@media(max-width:1024px){#home-cta,[id^="l3rk-sec"]{min-height:clamp(480px,62vw,700px)}}
/* no mobile nao havia corte (o preset ja usa zoom+feather); altura minima so criava area morta */n@media(max-width:767px){#home-cta,[id^="l3rk-sec"]{min-height:0}}
/* L3RKSIZE-END */

/* L3BLEND-START */
/* Continuidade entre secoes: as bases planas variavam (#010204, #05060c, #080a14,
   #0c0c0c, #05060d) e a diferenca aparecia como uma emenda seca a cada troca. Todas
   partem da mesma base e cada secao recebe um esfumado inset no topo e na base, agora
   mais longo e com um passo intermediario para a transicao ficar mais macia. O inset
   pinta acima do fundo e abaixo do conteudo, entao nao encosta em texto nem nos
   ::before/::after ja usados por neb-*, faq-*, home-svc. */
[data-elementor-type="wp-page"] > .e-con{
  background-color:#010204;
  box-shadow:inset 0 190px 150px -110px #010204, inset 0 -190px 150px -110px #010204,
             inset 0 90px 70px -60px rgba(1,2,4,.72), inset 0 -90px 70px -60px rgba(1,2,4,.72)}
/* o hero tem scrim proprio e palco sticky por cima; o ticker tem 43px de altura */
[data-elementor-type="wp-page"] > .e-con.l3-hero-track,
[data-elementor-type="wp-page"] > .e-con.elementor-element-7748790{box-shadow:none}
@media(max-width:767px){
  [data-elementor-type="wp-page"] > .e-con{
    box-shadow:inset 0 130px 100px -80px #010204, inset 0 -130px 100px -80px #010204,
               inset 0 60px 50px -44px rgba(1,2,4,.72), inset 0 -60px 50px -44px rgba(1,2,4,.72)}
}
/* L3BLEND-END */

/* L3MARQ-START */
/* Velocidade do marquee dos cases: +20% no desktop (45s->37,5s e 52s->43,3s, nas
   regras base) e +30% no mobile. Duracao menor = movimento mais rapido. */
@media(max-width:767px){
  .cases-marquee [data-marquee-row="1"]{animation-duration:34.6s}
  .cases-marquee [data-marquee-row="2"]{animation-duration:40s}
}
/* L3MARQ-END */

/* L3VIDEO-START */
/* Depoimentos em video (home). Fachada leve: so a capa carrega; o iframe do YouTube
   entra no clique, entao a pagina nao paga o custo do player para quem nao assiste. */
.l3-vdepo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 48px}
.l3-vcard{position:relative;display:block;width:100%;padding:0;margin:0;cursor:pointer;
  aspect-ratio:16/9;border:1px solid rgba(255,255,255,.09);border-radius:20px;overflow:hidden;
  background:#0e1220;transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .3s}
.l3-vcard:hover{transform:translateY(-4px);border-color:rgba(22,214,42,.45)}
.l3-vcard:focus-visible{outline:2px solid #16d62a;outline-offset:3px}
.l3-vcard img{width:100%;height:100%;object-fit:cover;display:block}
.l3-vcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* As capas do cliente ja tem o titulo gravado; o play centralizado cobria as palavras.
   Fica no canto inferior direito, onde nunca colide com o texto da capa. */
.l3-vplay{position:absolute;left:18px;bottom:18px;width:62px;height:62px;
  border-radius:50%;background:rgba(22,214,42,.94);display:grid;place-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.l3-vcard:hover .l3-vplay{transform:scale(1.09)}
.l3-vplay svg{width:28px;height:28px;fill:#04210a;margin-left:3px}
.l3-vmeta{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;
  padding:16px 18px;text-align:left;background:linear-gradient(0deg,rgba(1,2,4,.88),rgba(1,2,4,.35) 60%,transparent)}
.l3-vmeta b{color:#fff;font-weight:700;font-size:1rem;line-height:1.2}
.l3-vmeta em{color:rgba(255,255,255,.72);font-style:normal;font-size:.85rem}
.l3-vcard.is-playing .l3-vplay,.l3-vcard.is-playing .l3-vmeta{display:none}
@media(max-width:767px){
  .l3-vdepo{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
  .l3-vplay{width:54px;height:54px;left:14px;bottom:14px}.l3-vplay svg{width:22px;height:22px}
}
/* L3VIDEO-END */

/* L3DEPO-START */
/* Secao de depoimentos da home (#home-depo). A arte de fundo e a imagem do cliente:
   luz roxa a ESQUERDA (#6e46e1 amostrado do arquivo) e verde a DIREITA. O hover de
   cada card de video pega a cor da luz que esta atras dele. */
#home-depo{background-image:linear-gradient(rgba(5,6,13,.58),rgba(5,6,13,.58)),url(/wp-content/uploads/l3/l3-flow-bg.webp)!important}

.l3-vcard{--vhue:#6e46e1}
.l3-vdepo .l3-vcard:nth-child(2){--vhue:#22d36a}
.l3-vcard{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 46px -26px rgba(0,0,0,.8);
  transition:transform .38s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .38s}
.l3-vcard:hover{transform:translateY(-5px);
  border-color:rgba(255,255,255,.3);
  border-color:color-mix(in srgb,var(--vhue) 78%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
    0 24px 60px -22px color-mix(in srgb,var(--vhue) 62%,transparent),
    0 0 0 1px color-mix(in srgb,var(--vhue) 34%,transparent)}
.l3-vcard:focus-visible{outline:2px solid var(--vhue);outline-offset:3px}
/* o play fica em vidro, para nao virar um disco chapado sobre a capa */
.l3-vplay{background:rgba(22,214,42,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}

/* Cards dos depoimentos escritos: eram um bloco solido #0E1220 sobre uma arte de
   fundo - viravam retangulos opacos. Agora sao vidro de verdade, com a luz da
   secao passando por tras. */
.elementor-66 .elementor-element-208809e,
.elementor-66 .elementor-element-ab94f7c,
.elementor-66 .elementor-element-291e5ce{
  background-color:transparent!important;
  background-image:linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.02))!important;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  border-color:rgba(255,255,255,.15)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 50px -30px rgba(0,0,0,.85);
  transition:transform .38s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .38s}
.elementor-66 .elementor-element-208809e:hover,
.elementor-66 .elementor-element-ab94f7c:hover,
.elementor-66 .elementor-element-291e5ce:hover{transform:translateY(-4px);
  border-color:rgba(255,255,255,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 60px -28px rgba(0,0,0,.9)}
@media(max-width:767px){
  .l3-vcard,.elementor-66 .elementor-element-208809e,
  .elementor-66 .elementor-element-ab94f7c,
  .elementor-66 .elementor-element-291e5ce{-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
}
/* L3DEPO-END */

/* L3LOGOS-START */
/* Faixa de clientes logo abaixo do hero (no lugar do ticker verde de servicos).
   Referencia do cliente: banda escura, logos monocromaticas rolando em loop.
   As marcas vem em cores e tintas diferentes (algumas escuras, que sumiriam no
   preto), entao todas viram silhueta branca por filtro - assim a faixa le como
   um conjunto e nenhuma marca some. */
.l3-logos{position:relative;overflow:hidden;background:#07090f;
  border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
  padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.l3-logos-track{display:flex;align-items:center;gap:74px;width:max-content;
  animation:l3-marq-l 38s linear infinite;will-change:transform}
.l3-logos:hover .l3-logos-track{animation-play-state:paused}
.l3-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.l3-logo img{height:42px;width:auto;max-width:186px;object-fit:contain;display:block;
  filter:brightness(0) invert(1);opacity:.58;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.l3-logo:hover img{opacity:1;transform:scale(1.06)}
@media(max-width:900px){
  .l3-logos{padding:20px 0}
  .l3-logos-track{gap:52px;animation-duration:26s}
  .l3-logo img{height:34px;max-width:150px}
}
@media(prefers-reduced-motion:reduce){.l3-logos-track{animation:none}}
/* L3LOGOS-END */

/* L3WIDE-START */
/* Telas grandes: o site estava congelado em 1440 - conteudo preso em 1200px e
   tipografia fixa, entao em 2560/3440 sobrava uma faixa preta enorme dos dois lados.
   A largura vem de --container-max-width no .e-con (0,1,0), e a tipografia do site e
   em rem - entao um degrau no font-size da raiz escala titulos, texto e a medida de
   leitura (62ch) juntos, sem inchar os paddings em px. */
@media(min-width:1600px){
  :root{font-size:17px}
  [data-elementor-type] .e-con{--container-max-width:1320px}
  .l3-wp-header .bar{max-width:1320px}
  .site-footer .cols{max-width:1320px}
  #home-cta,[id^="l3rk-sec"]{min-height:clamp(600px,49vw,880px)}
}
@media(min-width:1920px){
  :root{font-size:18px}
  [data-elementor-type] .e-con{--container-max-width:1440px}
  .l3-wp-header .bar{max-width:1440px}
  .site-footer .cols{max-width:1440px}
  .marquee-tile{width:470px;height:302px}
  .l3-logo img{height:48px;max-width:210px}
}
@media(min-width:2400px){
  :root{font-size:19px}
  [data-elementor-type] .e-con{--container-max-width:1560px}
  .l3-wp-header .bar{max-width:1560px}
  .site-footer .cols{max-width:1560px}
  .marquee-tile{width:520px;height:334px}
  #home-cta,[id^="l3rk-sec"]{min-height:clamp(700px,44vw,1000px)}
}
/* L3WIDE-END */

/* L3SVCSTRIP-START */
/* Faixa de servicos logo abaixo do hero, no mesmo estilo da faixa de clientes.
   Cada item carrega a cor do proprio icone no site (--shue) e so a mostra no hover -
   em repouso a faixa fica neutra e nao briga com o hero. */
.l3-svcstrip{position:relative;overflow:hidden;background:#07090f;
  border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
  padding:20px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.l3-svcstrip-track{display:flex;align-items:center;gap:56px;width:max-content;
  animation:l3-marq-l 46s linear infinite;will-change:transform}
.l3-svcstrip:hover .l3-svcstrip-track{animation-play-state:paused}
.l3-svcitem{flex:0 0 auto;display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  color:rgba(255,255,255,.62);font-family:"Poppins",system-ui,sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
  transition:color .3s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.l3-svcitem .ic{display:flex;color:currentColor;transition:color .3s ease,filter .3s ease}
.l3-svcitem .ic svg{width:22px;height:22px;display:block}
.l3-svcitem:hover,.l3-svcitem:focus-visible{color:var(--shue,#16d62a);transform:translateY(-1px)}
.l3-svcitem:hover .ic{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--shue) 55%,transparent))}
.l3-svcitem:focus-visible{outline:2px solid var(--shue,#16d62a);outline-offset:4px;border-radius:6px}
/* separador discreto entre os itens, no lugar do losango do ticker antigo */
.l3-svcitem::after{content:"";width:4px;height:4px;border-radius:50%;margin-left:56px;
  background:rgba(255,255,255,.22)}
.l3-svcstrip-track{gap:0}
.l3-svcitem{margin-right:56px}
@media(max-width:900px){
  .l3-svcstrip{padding:16px 0}
  .l3-svcstrip-track{animation-duration:32s}
  .l3-svcitem{font-size:.74rem;margin-right:38px}
  .l3-svcitem::after{margin-left:38px}
  .l3-svcitem .ic svg{width:19px;height:19px}
}
@media(prefers-reduced-motion:reduce){.l3-svcstrip-track{animation:none}}

/* A faixa de clientes agora vive dentro da secao de depoimentos: perde a banda
   escura de borda a borda e vira uma tira dentro do bloco. */
#home-depo .l3-logos{background:transparent;border:0;padding:8px 0 0;margin-top:8px}
#home-depo .l3-logos::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
/* L3SVCSTRIP-END */

/* L3DIR-START */
/* Direcao da entrada. O JS marca cada elemento com l3-rv-l/r/d/u a partir do
   layout: coluna da esquerda entra da esquerda, a da direita entra da direita,
   eyebrow desce de cima, o resto sobe (que ja era o padrao do bloco 6).
   O !important e necessario porque as variantes por tipo de widget do bloco 6
   tem a mesma especificidade. */
.l3-rv-l.l3-rv:not(.l3-in){transform:translate3d(-38px,0,0)!important}
.l3-rv-r.l3-rv:not(.l3-in){transform:translate3d(38px,0,0)!important}
.l3-rv-d.l3-rv:not(.l3-in){transform:translate3d(0,-24px,0)!important}
/* titulos mantem o desfoque de entrada mesmo quando vem de lado */
.elementor-widget-heading.l3-rv-l.l3-rv:not(.l3-in),
.elementor-widget-heading.l3-rv-r.l3-rv:not(.l3-in){filter:blur(6px)}
/* imagens e cards que entram de lado ganham a mesma escala sutil do padrao */
.elementor-widget-image.l3-rv-l.l3-rv:not(.l3-in){transform:translate3d(-38px,0,0) scale(.986)!important}
.elementor-widget-image.l3-rv-r.l3-rv:not(.l3-in){transform:translate3d(38px,0,0) scale(.986)!important}
/* L3DIR-END */

/* L3DEPOSP-START */
/* Respiro dentro da secao de depoimentos: os videos estavam colados no titulo e a
   faixa de logos colada nos cards. Os tres blocos sao irmaos no mesmo container e
   herdavam so o gap padrao de 24px. */
#home-depo .l3-vdepo{margin-top:52px;margin-bottom:60px}
#home-depo .l3-logos{margin-top:64px;padding:34px 0 6px}
@media(max-width:900px){
  #home-depo .l3-vdepo{margin-top:34px;margin-bottom:38px}
  #home-depo .l3-logos{margin-top:42px;padding:28px 0 4px}
}
/* L3DEPOSP-END */

/* L3GREENSTRIP-START */
/* Faixa de servicos no verde da marca (como era o ticker). Sobre verde, o glow e o
   proprio matiz claro do servico sumiriam - a cor de cada servico entra escurecida
   ate 62% sobre o verde-escuro da tipografia, entao continua reconhecivel e legivel.
   A mascara de fade nas bordas sai: numa banda solida ela apagaria a propria faixa. */
.l3-svcstrip{background:#16d62a;border-top:1px solid rgba(4,33,10,.16);border-bottom:1px solid rgba(4,33,10,.16);
  -webkit-mask-image:none;mask-image:none}
.l3-svcitem{color:rgba(4,33,10,.8)}
.l3-svcitem::after{background:rgba(4,33,10,.3)}
.l3-svcitem:hover,.l3-svcitem:focus-visible{color:#04210a;color:color-mix(in srgb,var(--shue) 62%,#04210a)}
.l3-svcitem:hover .ic{filter:none}
.l3-svcitem:focus-visible{outline-color:#04210a}

/* Base do hero escurecendo, como ficava com o efeito de quadros ligado (o efeito
   segue desligado; isto e so o degrade). A ::after pinta acima do video de fundo e
   abaixo do conteudo, que sobe para z-index 1. */
[data-elementor-type="wp-page"] > .e-con:first-child{position:relative}
[data-elementor-type="wp-page"] > .e-con:first-child::after{content:"";position:absolute;
  left:0;right:0;bottom:0;height:46%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,2,4,0) 0%,rgba(1,2,4,.42) 46%,rgba(1,2,4,.9) 86%,#010204 100%)}
[data-elementor-type="wp-page"] > .e-con:first-child > .e-con-inner{position:relative;z-index:1}
/* L3GREENSTRIP-END */

/* L3FIX1-START */
/* Faixa de servicos: letra e icone maiores, e o fade das pontas volta - mas aplicado
   ao TRACK, nao a faixa. Mascarar a faixa inteira apagaria o proprio verde nas bordas;
   mascarando so os itens, a banda continua solida de ponta a ponta e os nomes surgem
   e somem suavemente. */
.l3-svcstrip{padding:26px 0}
/* A mascara no track nao funciona: ele e bem mais largo que a tela e esta em
   movimento, entao as bordas mascaradas ficam fora de vista. O degrade vai nas
   laterais da FAIXA, na propria cor verde - os nomes surgem e somem no fundo. */
.l3-svcstrip-track{-webkit-mask-image:none;mask-image:none}
.l3-svcstrip::before,.l3-svcstrip::after{content:"";position:absolute;top:0;bottom:0;z-index:2;
  width:clamp(60px,9vw,170px);pointer-events:none}
.l3-svcstrip::before{left:0;background:linear-gradient(90deg,#16d62a 12%,rgba(22,214,42,0))}
.l3-svcstrip::after{right:0;background:linear-gradient(270deg,#16d62a 12%,rgba(22,214,42,0))}
.l3-svcitem{font-size:1rem;letter-spacing:.1em;gap:13px}
.l3-svcitem .ic svg{width:28px;height:28px}
@media(max-width:900px){
  .l3-svcstrip{padding:20px 0}
  .l3-svcitem{font-size:.86rem}
  .l3-svcitem .ic svg{width:23px;height:23px}
}

/* Heros das paginas internas ficavam com 430-480px numa tela de 1080: o video de
   fundo virava uma tira e a cena aparecia cortada. Altura minima proporcional a
   viewport, como a home ja tinha. */
[data-elementor-type="wp-page"] > .e-con:first-child{min-height:clamp(430px,62vh,760px)}
@media(max-width:767px){
  [data-elementor-type="wp-page"] > .e-con:first-child{min-height:clamp(400px,58vh,620px)}
}
/* L3FIX1-END */

/* L3PAD-START */
/* O padding dos containers aninhados se acumulava (20-24px por nivel), entao cada
   secao comecava numa borda diferente: 240, 264, 269, 288, 312... Em 1920 isso fica
   obvio - o texto de uma secao nao alinha com o da seguinte. Agora o respiro fica so
   na borda da pagina e todo conteudo parte da mesma coluna; os containers que tem
   superficie propria (fundo, borda ou sombra) mantem o padding interno. */
[data-elementor-type="wp-page"] .e-con .e-con{padding-left:0!important;padding-right:0!important}
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-208809e,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-ab94f7c,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-291e5ce,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-8140cc5,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-0aeca84,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-ad5dd6f,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-69f2f5c,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-aaa0b41,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-6fb33a8,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-048d3b9,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-bf2e234,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-0e7be7e,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-b12221c,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-b888acf,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-6c8d864,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-749d40c,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-cd87796,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-33810e8,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-009bf2e,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-391d3f1,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-97e21fd{padding-left:20px!important;padding-right:20px!important}
@media(min-width:768px){
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-208809e,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-ab94f7c,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-291e5ce,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-8140cc5,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-0aeca84,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-ad5dd6f,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-69f2f5c,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-aaa0b41,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-6fb33a8,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-048d3b9,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-bf2e234,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-0e7be7e,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-b12221c,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-b888acf,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-6c8d864,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-749d40c,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-cd87796,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-33810e8,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-009bf2e,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-391d3f1,
[data-elementor-type="wp-page"] .e-con .e-con.elementor-element-97e21fd{padding-left:30px!important;padding-right:30px!important}
}
/* L3PAD-END */

/* L3FAQ2-START */
/* FAQ: as perguntas ficavam quase encostadas (gap 14px) e o titulo da secao era o
   menor do site (35px contra 56px das demais). */
.l3-faq{gap:22px}
.l3-faq-head{margin:0 auto 48px}
/* !important porque o tamanho por widget do Elementor (.elementor-NN .elementor-element-XX
   .elementor-heading-title) empata em especificidade e carrega depois. */
[id^="faq-"] .elementor-widget-heading .elementor-heading-title{
  font-size:clamp(2.1rem,3vw,3rem)!important;line-height:1.08}
@media(max-width:767px){
  .l3-faq{gap:16px}
  .l3-faq-head{margin-bottom:34px}
  [id^="faq-"] .elementor-widget-heading .elementor-heading-title{font-size:1.75rem!important}
}
/* L3FAQ2-END */

/* L3HERO3-START */
/* 1) O conteudo do hero precisa ficar ACIMA do degrade da base. O .e-con-inner e
      position:static, e elemento posicionado (o ::after) pinta acima de estatico -
      por isso os botoes apareciam apagados. Sobe tudo menos o video de fundo. */
[data-elementor-type="wp-page"] > .e-con:first-child > *:not(.elementor-background-video-container):not(.elementor-background-overlay){
  position:relative;z-index:2}

/* 2) A home voltou a ter hero cheio: com 62vh o video de 16:9 era cortado no topo
      (a cabeca do astronauta ficava fora). 100vh em 1920x1080 mostra o quadro inteiro. */
.elementor-66 > .e-con:first-child{min-height:min(100vh,1100px)}
@media(max-width:767px){.elementor-66 > .e-con:first-child{min-height:min(88vh,760px)}}

/* 3) Sombra leve: um vinheta suave no topo (da contraste para o menu sobre o video)
      e uma sombra macia na base, separando o hero da faixa verde. */

[data-elementor-type="wp-page"] > .e-con:first-child{
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.05)}
/* L3HERO3-END */

/* L3FORM-START */
/* Formulario de contato: o painel era um bloco solido #0E1220 sobre a arte da secao
   e os campos tinham placeholder quase ilegivel. Vira vidro, com a mesma linguagem
   dos cards de depoimento, e o texto dentro dos campos ganha contraste. */
.elementor-86 .elementor-element-009bf2e{
  background-color:transparent!important;
  background-image:linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.022))!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 26px 60px -34px rgba(0,0,0,.9)}

/* campos: vidro claro sobre o painel, borda visivel e texto branco */
/* A regra antiga usa seletores com ELEMENTO (input.elementor-field, textarea...),
   que vencem os meus so com classe - por isso os campos continuavam #090c15.
   Aqui a especificidade e igual e vem depois. */
.elementor-form .elementor-field-group input.elementor-field,
.elementor-form .elementor-field-group textarea.elementor-field,
.elementor-form .elementor-field-group select.elementor-field,
.elementor-form .elementor-field-group .elementor-select-wrapper select{
  background-color:rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18)!important;border-radius:12px!important;
  color:#fff!important;font-size:1rem!important;line-height:1.5;
  transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease}
.elementor-form input.elementor-field::placeholder,
.elementor-form textarea.elementor-field::placeholder{color:rgba(255,255,255,.7)!important;opacity:1}
.elementor-form .elementor-field-group input.elementor-field:focus,
.elementor-form .elementor-field-group textarea.elementor-field:focus,
.elementor-form .elementor-field-group select.elementor-field:focus{
  outline:none;background-color:rgba(255,255,255,.1)!important;
  border-color:rgba(22,214,42,.75)!important;
  box-shadow:0 0 0 3px rgba(22,214,42,.18)}
.elementor-form select.elementor-field option{background:#0b0f1a;color:#fff}
/* rotulos mais claros e com respiro */
.elementor-form .elementor-field-group > label{color:#e6eaf2!important;font-weight:600;
  font-size:.9rem;margin-bottom:8px;display:block;letter-spacing:.01em}
/* aceite LGPD: caixa e texto na mesma linha, caixa no verde da marca */
.elementor-form .elementor-field-type-acceptance .elementor-field-option{display:flex;
  align-items:flex-start;gap:11px}
.elementor-form .elementor-field-type-acceptance input[type=checkbox]{width:19px;height:19px;
  margin:2px 0 0;accent-color:#16d62a;flex:0 0 auto;cursor:pointer}
.elementor-form .elementor-field-type-acceptance label{color:rgba(255,255,255,.86)!important;
  font-size:.92rem;line-height:1.5;margin:0!important;font-weight:400}
@media(max-width:767px){
  .elementor-86 .elementor-element-009bf2e{-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
  .elementor-form .elementor-field-group .elementor-field{font-size:1rem!important}
}
/* L3FORM-END */

/* L3FORM2-START */
/* O select fica dentro de um wrapper que carrega o fundo escuro; e o checkbox do
   LGPD e um .elementor-field, entao herdava min-height:54px e padding dos inputs -
   por isso a caixinha desalinhava do texto. */
.elementor-form .elementor-field-group .elementor-select-wrapper{
  background-color:rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18)!important;border-radius:12px!important;overflow:hidden}
.elementor-form .elementor-field-group .elementor-select-wrapper select{
  background-color:transparent!important;border:0!important;color:#fff!important;font-size:1rem!important}
.elementor-form .elementor-field-group .elementor-select-wrapper::before{color:rgba(255,255,255,.7)}

.elementor-form .elementor-field-group input[type=checkbox].elementor-field{
  min-height:0!important;height:19px!important;width:19px!important;padding:0!important;
  margin:3px 0 0!important;border-radius:5px!important;accent-color:#16d62a;
  background-color:rgba(255,255,255,.1)!important;flex:0 0 auto;cursor:pointer}
.elementor-form .elementor-field-type-acceptance .elementor-field-subgroup{display:block}
.elementor-form .elementor-field-type-acceptance .elementor-field-option{display:flex;
  align-items:flex-start;gap:11px}
/* L3FORM2-END */



/* L3SLIDE-START */
/* Cards do slide de servicos: estavam achatados (341x289 em 1920, 281x281 em 1440 -
   praticamente quadrados). Altura minima + mais respiro interno deixam o card em pe,
   com o icone, o titulo, a descricao e a seta em ritmo. Vale na home e nas paginas de
   servico, que usam o mesmo componente. */
.l3-slider .svc-card{min-height:372px;padding:36px 26px 30px;justify-content:flex-start;gap:2px}
.l3-slider .svc-card h3{margin-top:4px}
.l3-slider .svc-card p{margin-top:6px}
.l3-slider .svc-card .svc-go{margin-top:auto}
@media(max-width:1024px){.l3-slider .svc-card{min-height:352px;padding:32px 24px 28px}}
@media(max-width:767px){.l3-slider .svc-card{min-height:336px;padding:30px 22px 26px}}
/* topo do hero com o mesmo peso da base: era 190px a .62, agora acompanha o degrade
   de baixo em altura e curva, so que invertido. */

/* L3SLIDE-END */

/* L3RKCARD-START */
/* 1) O card do foguete tem padding proprio (48px). Ele nao pode cair na regra que zera
      o padding horizontal dos containers aninhados - no /contato/ o card clonado ficou
      fora da lista de excecoes e o botao encostou na borda. Excecao por prefixo de id,
      que vale para qualquer clone futuro. */
[data-elementor-type="wp-page"] .e-con .e-con[id^="l3rk-card"]{
  padding-left:48px!important;padding-right:48px!important}
@media(max-width:767px){
  [data-elementor-type="wp-page"] .e-con .e-con[id^="l3rk-card"]{padding-left:26px!important;padding-right:26px!important}
}
/* respiro entre o texto e o botao dentro do card */
[id^="l3rk-card"]{gap:32px}

/* 2) O card ficava ancorado no topo da secao (80px do topo, 556px sobrando embaixo).
      Agora centraliza na altura da secao. */
[id^="l3rk-sec"],#home-cta{justify-content:center}
[id^="l3rk-sec"]{padding-top:96px!important;padding-bottom:96px!important}
@media(max-width:767px){
  [id^="l3rk-sec"]{padding-top:56px!important;padding-bottom:64px!important}
}
/* L3RKCARD-END */

/* L3SLIDE2-START */
/* Ritmo interno do card de servico: icone -> titulo -> fio -> descricao -> seta.
   Antes tudo vinha colado no topo (gap 2px) e sobrava um vazio grande antes da seta.
   Agora cada passo tem seu intervalo e a seta ancora embaixo, com um minimo garantido. */
.l3-slider .svc-card{min-height:356px;padding:34px 26px 28px;gap:0;justify-content:flex-start}
.l3-slider .svc-card .svc-ic{margin:0 0 20px;display:flex}
.l3-slider .svc-card h3{margin:0 0 12px}
.l3-slider .svc-card .svc-rule{margin:0 0 14px}
.l3-slider .svc-card p{margin:0 0 26px}
.l3-slider .svc-card .svc-go{margin-top:auto}
/* o card em destaque tem o badge sobre a borda: compensa para o icone alinhar com os demais */
.l3-slider .svc-card.is-featured{padding-top:40px}
@media(max-width:1024px){.l3-slider .svc-card{min-height:344px;padding:30px 24px 26px}}
@media(max-width:767px){
  .l3-slider .svc-card{min-height:330px;padding:28px 22px 24px}
  .l3-slider .svc-card .svc-ic{margin-bottom:16px}
  .l3-slider .svc-card p{margin-bottom:22px}
}
/* L3SLIDE2-END */

/* L3DIR2-START */
/* Entrada no estilo da referencia (gsclimatizacaonatal.com.br): la sao as animacoes
   nativas do Elementor - fadeInUp/fadeInLeft/zoomIn com a classe animated-slow, ou
   seja percurso longo (translate3d de 100% do proprio elemento) e ~2s de duracao.
   Aqui o percurso e generoso mas limitado em px, senao um container de largura cheia
   sairia inteiro da tela e criaria barra de rolagem horizontal. */
.l3-rv{transition-duration:1.5s!important;
  transition-timing-function:cubic-bezier(.16,.72,.24,1)!important}
.l3-rv-l.l3-rv:not(.l3-in){transform:translate3d(-110px,0,0)!important}
.l3-rv-r.l3-rv:not(.l3-in){transform:translate3d(110px,0,0)!important}
.l3-rv-d.l3-rv:not(.l3-in){transform:translate3d(0,-62px,0)!important}
.l3-rv-u.l3-rv:not(.l3-in){transform:translate3d(0,72px,0)!important}
/* imagens e cards ganham o toque de zoomIn junto com o deslocamento */
.elementor-widget-image.l3-rv-l.l3-rv:not(.l3-in){transform:translate3d(-110px,0,0) scale(.94)!important}
.elementor-widget-image.l3-rv-r.l3-rv:not(.l3-in){transform:translate3d(110px,0,0) scale(.94)!important}
.elementor-widget-image.l3-rv-u.l3-rv:not(.l3-in),
.elementor-widget-html.l3-rv-u.l3-rv:not(.l3-in),
.svc-card.l3-rv:not(.l3-in),.value-card.l3-rv:not(.l3-in),
.stat-card.l3-rv:not(.l3-in),.card-service-lg.l3-rv:not(.l3-in){
  transform:translate3d(0,72px,0) scale(.94)!important}
/* nada pode transbordar a viewport durante a entrada */
/* substituido pelo bloco L3NOSIDE */
@media(max-width:767px){
  .l3-rv{transition-duration:1.2s!important}
  .l3-rv-u.l3-rv:not(.l3-in){transform:translate3d(0,48px,0)!important}
  .l3-rv-l.l3-rv:not(.l3-in),.l3-rv-r.l3-rv:not(.l3-in){transform:translate3d(0,48px,0)!important}
}
/* L3DIR2-END */

/* L3CTFAQ-START */
/* Todas as secoes de FAQ (11 no site: paginas 69-78 e 86, todas com id faq-NN e sem
   fundo proprio) recebem a arte de ondas roxo/verde, sem scrim: as perguntas sao
   cards de vidro com fundo proprio, entao a leitura nao depende de escurecer o fundo. */
[id^="faq-"]{
  background-image:url(/wp-content/uploads/l3/l3-flow-bg.webp)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important}
/* com a arte atras, o brilho verde generico do bloco de iluminacao vira excesso */
[id^="faq-"]::before{opacity:.10}
/* L3CTFAQ-END */

/* L3FAQGLASS-START */
/* Acordeao do FAQ em vidro, na mesma linguagem dos cards de depoimento e do formulario:
   gradiente translucido, blur com saturacao, fio de brilho no topo e sombra macia.
   Com a arte de ondas atras, o vidro passa a ter o que desfocar. */
.l3-faq details{
  background:linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.022))!important;
  border:1px solid rgba(255,255,255,.15)!important;border-radius:18px!important;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 44px -30px rgba(0,0,0,.85);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.l3-faq details:hover{border-color:rgba(255,255,255,.26)!important;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 22px 50px -28px rgba(0,0,0,.9)}
.l3-faq details[open]{
  background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.035))!important;
  border-color:rgba(22,214,42,.5)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px rgba(22,214,42,.16),0 22px 50px -28px rgba(0,0,0,.9)}
@media(max-width:767px){
  .l3-faq details{-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
}
/* L3FAQGLASS-END */

/* L3SVCVID-START */
/* Video na coluna direita das paginas de servico, abaixo do "O que esta incluso":
   aquela coluna terminava cedo e deixava um vazio grande ao lado do texto. Mesma
   moldura dos tiles do bento (raio 20, borda sutil) e proporcao do arquivo (16:9). */
.l3-svcvideo{position:relative;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);background:#05060d;aspect-ratio:16/9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 44px -30px rgba(0,0,0,.85)}
.l3-svcvideo video{width:100%;height:100%;object-fit:cover;display:block}
/* leve vinheta para casar com o resto da pagina */
.l3-svcvideo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,2,4,.12),rgba(1,2,4,.42))}
/* L3SVCVID-END */

/* L3CORES-START */
/* 1) Social Media em laranja em todo o site. A cor vem inline em --hue/--shue nos
      cards e nos itens da faixa, entao a troca e ancorada no proprio link do servico -
      pega home, /solucoes/, paginas de servico, faixa e menu de uma vez. */
[href*="/solucoes/social/"]{--hue:#ffd45e!important;--shue:#ffd45e!important}
.elementor-76 .svc-media{--hue:#ffd45e!important}

/* 2) Traco dos cards de numero: o verde se repetia em dois dos quatro (quem-somos e
      crm tem o mesmo grupo). Uma cor por posicao, nenhuma repetida. */
.stat-card:nth-child(1){--hue:#16d62a!important}
.stat-card:nth-child(2){--hue:#8b5cf6!important}
.stat-card:nth-child(3){--hue:#3b82f6!important}
.stat-card:nth-child(4){--hue:#06b6d4!important}
.stat-card:nth-child(5){--hue:#e23fd0!important}
.stat-card:nth-child(6){--hue:#f5b301!important}
/* os passos do CRM eram todos verdes: mesma logica de uma cor por posicao */
.crm-step:nth-child(1) .crm-step-n{color:#16d62a;text-shadow:0 0 22px rgba(22,214,42,.38)}
.crm-step:nth-child(2) .crm-step-n{color:#8b5cf6;text-shadow:0 0 22px rgba(139,92,246,.38)}
.crm-step:nth-child(3) .crm-step-n{color:#3b82f6;text-shadow:0 0 22px rgba(59,130,246,.38)}
.crm-step:nth-child(4) .crm-step-n{color:#e23fd0;text-shadow:0 0 22px rgba(226,63,208,.38)}

/* 3) Texto das listas de checagem estava no violeta da marca (#6b5bd6) sobre painel
      escuro - baixo contraste. Vira cinza claro, que le bem e nao briga com o verde
      do check. O icone continua colorido. */
[data-elementor-type="wp-page"] .elementor-icon-list-item .elementor-icon-list-text,
[data-elementor-type="wp-page"] .elementor-icon-list-item > a{color:#c9cfdd!important}
[data-elementor-type="wp-page"] .feature-item span:not(.ic){color:#c9cfdd}
/* L3CORES-END */

/* L3SVCFIX-START */
/* 1) Bento no mobile: nome do servico e icone primeiro, depois a foto, depois a
      descricao. No desktop a ordem visual continua a mesma. */
@media(max-width:720px){
  .svc-media .tag-tile{order:0}
  .svc-media .ic-tile{order:1}
  .svc-media .photo{order:2;grid-column:span 2}
}
/* 2) O bloco do nome usa a cor do proprio servico (a mesma do icone da pagina),
      que ja chega em --hue no .svc-media. */
.svc-media .tag-tile{background:var(--hue,#16d62a)!important;color:#06080f}
.svc-media .tag-tile .l3-eyebrow{color:rgba(6,8,15,.62)}
.svc-media .ic-tile{color:var(--hue,#16d62a)}

/* 3) "Outros servicos": o titulo alinhava a 240 e a introducao caia em 640 (herdou a
      centralizacao de blocos centrados). Tudo na mesma coluna do titulo. */
/* O container do cabecalho e flex com align-items:center, entao o paragrafo (que tem
   largura de leitura menor que a linha) era centralizado enquanto o titulo ocupava a
   largura toda - dai o titulo em 240 e o texto em 640. */
#outros-svc .e-con{align-items:flex-start}
#outros-svc p{margin-left:0!important;margin-right:0!important}
#outros-svc .svc-head,#outros-svc .svc-head *{text-align:left}
@media(max-width:767px){
  #outros-svc{padding-top:60px!important;padding-bottom:56px!important}
  #outros-svc .svc-head{margin-bottom:26px}
  #outros-svc .svc-grid,#outros-svc .l3-track{gap:18px}
}

/* 4) Sombra do topo do hero: comecava em #010204 solido no 0%, o que dava um corte
      seco. Agora e a mesma curva da base, so que espelhada. */

/* L3SVCFIX-END */

/* L3NOTOP-START */
/* Sobreposicao escura no topo do hero. O ::before do container disputava pintura
   com o video/imagem de fundo do Elementor e em varias paginas nao aparecia. Agora
   o l3-fx.js insere um elemento real (.l3-hero-scrim) como primeiro filho do hero;
   z-index 1 fica acima do fundo e abaixo do conteudo (que L3HERO3 poe em 2). */
[data-elementor-type="wp-page"] > .e-con:first-child::before{content:none!important;background:none!important}
/* L3HERO3 sobe TODO filho do hero para position:relative;z-index:2 - isso tirava o
   scrim do fluxo absoluto e ele virava uma caixa de altura 0. Dai o !important. */
.l3-hero-scrim{position:absolute!important;left:0!important;right:0!important;top:0!important;
  height:38%!important;z-index:1!important;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(1,2,4,.9) 0%,rgba(1,2,4,.74) 20%,rgba(1,2,4,.5) 44%,rgba(1,2,4,.24) 68%,rgba(1,2,4,.08) 86%,rgba(1,2,4,0) 100%)}
/* home: o video de fundo e muito claro, entao o topo comeca mais fechado */
.elementor-66 .l3-hero-scrim{height:48%!important;
  background:linear-gradient(180deg,rgba(1,2,4,.97) 0%,rgba(1,2,4,.88) 16%,rgba(1,2,4,.66) 38%,rgba(1,2,4,.38) 62%,rgba(1,2,4,.14) 84%,rgba(1,2,4,0) 100%)}
@media(max-width:767px){
  .l3-hero-scrim{height:44%!important}
  .elementor-66 .l3-hero-scrim{height:42%!important}
}
/* rede de seguranca: se sobrar algum scrim no post unico ou no arquivo, ele nao pinta */
[data-elementor-type="single-post"] .l3-hero-scrim,
[data-elementor-type="archive"] .l3-hero-scrim{display:none!important}
/* o hero de quadros (desligado) tem palco proprio */
.l3-hero-track.is-scrollframes .l3-hero-scrim{display:none}
/* L3NOTOP-END */



/* L3LOGO-START */
/* A logo nova e mais alta que larga (1200x962) - com a altura antiga de 46px ela
   ficava com 57px de largura e sumia ao lado do menu. Altura maior devolve presenca
   sem empurrar o header. */
.l3-wp-header .bar img,.l3-wp-header .brand img{height:43.5px!important;width:auto!important;max-width:none}
.site-footer .brand-col img{height:66px!important;width:auto!important}
@media(max-width:900px){
  .l3-wp-header .bar img,.l3-wp-header .brand img{height:40px!important}
  .site-footer .brand-col img{height:56px!important}
}
/* L3LOGO-END */

/* L3STRIPFB-START */
/* Faixa de servicos borda a borda. left:50%+transform resolvia contra o container
   errado e calc(-1 * (100vw - 100%)/2) o Chrome zerava; o que funciona e este par. */
.l3-svcstrip{position:relative;width:100vw!important;max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}

/* Laterais: mesmo efeito da faixa de logos dos clientes - mascara que dissolve a
   propria faixa nas pontas, em vez das camadas escuras que estavam aqui. */
.l3-svcstrip::before,.l3-svcstrip::after{content:none!important}
.l3-svcstrip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
/* L3STRIPFB-END */

/* L3FLOW70-START */
/* Secao de servicos da /solucoes/ com o mesmo campo de particulas de "Nossos valores"
   (o canvas e injetado pelo JS via FLOW_SELECTOR; aqui vao a base escura, a vinheta
   e o empilhamento, iguais aos de #qs-valores). */
#solucoes-flow{position:relative;overflow:hidden;isolation:isolate;background:#05060c!important}
#solucoes-flow>*:not(.flowfield-canvas){position:relative;z-index:1}
/* a grade dos cards tinha coluna automatica e o primeiro card definia a largura da
   trilha (1136px) enquanto os outros escapavam para 1440 - coluna fixa em 1fr resolve */
/* a grade vivia num .container de 1200px enquanto seis dos sete cards escapavam para
   1440 (largura do shell) - o primeiro respeitava o container e ficava menor. Solta o
   container e fixa a coluna: os sete passam a ter a mesma largura. */
/* o gap inline de 22px deixava os cards quase colados; 32px em todas as larguras */
#solucoes-flow .container.section-tight{gap:32px!important;row-gap:32px!important;
  max-width:none;width:100%;padding-left:0;padding-right:0;
  grid-template-columns:1fr}
#solucoes-flow .card-service-lg{width:100%;max-width:none}
#solucoes-flow::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 74% 68% at 50% 46%,transparent 26%,rgba(5,6,12,.88) 100%)}
/* L3FLOW70-END */

/* L3SUBMENU-START */
@media(min-width:901px){
  /* o JS mantem .l3-open por 0,5s depois que o mouse sai do item OU do submenu */
  .l3-wp-header .nav-item.l3-open .nav-dropdown{display:grid!important;animation:l3-fade .18s ease-out}
  /* ponte sobre os 8px de margem entre o item e a lista: sem ela o ponteiro passa
     por uma faixa morta ao descer e o mouseleave dispara sem necessidade */
  .l3-wp-header .nav-dropdown::before{content:"";position:absolute;left:0;right:0;
    top:-10px;height:10px}
  /* a area sensivel do item cobre ate o inicio da lista */
  .l3-wp-header .nav-item{padding-bottom:2px}
}
/* L3SUBMENU-END */

/* L3GAME-START */
/* Convite do jogo na home + sobreposicao que abre o jogo num iframe. */
.l3-game-cta{display:grid;gap:44px;align-items:center;grid-template-columns:1.05fr .95fr}
.gcx .l3-eyebrow{margin-bottom:14px}
.gch{font-size:clamp(28px,3.1vw,44px);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0 0 16px;font-weight:800}
.gcp{font-size:1.0625rem;line-height:1.7;color:#c8d2e2;margin:0 0 20px;max-width:52ch}
.gcl{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.gcl li{position:relative;padding-left:26px;font-size:.9375rem;color:#dbe3ef;line-height:1.5}
.gcl li:before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#5ef08a,#16d62a 60%,#0a7a1c);box-shadow:0 0 12px rgba(22,214,42,.55)}
.gcb{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;font:inherit;
  font-weight:700;font-size:1.0625rem;color:#04120a;padding:16px 28px;border-radius:999px;
  background:linear-gradient(135deg,#3df05a,#16d62a 55%,#0fb823);
  box-shadow:0 14px 40px -14px rgba(22,214,42,.85),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s}
.gcb:hover{transform:translateY(-2px);box-shadow:0 20px 52px -14px rgba(22,214,42,.95),inset 0 1px 0 rgba(255,255,255,.5)}
.gcb:focus-visible{outline:3px solid #7df59a;outline-offset:3px}
.gcn{display:block;margin-top:16px;font-size:.8125rem;color:#7d8a9c}
/* moldura da previa: parece um fliperama vertical */
.gcm{display:flex;justify-content:center}
.gcf{position:relative;display:block;border:0;padding:10px;cursor:pointer;width:min(300px,100%);
  border-radius:26px;background:linear-gradient(160deg,rgba(124,92,255,.4),rgba(0,224,255,.16) 45%,rgba(22,214,42,.28));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 60px -30px rgba(124,92,255,.6)}
.gcf img{display:block;width:100%;height:auto;border-radius:18px}
.gcp2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;
  border-radius:50%;display:grid;place-items:center;color:#04120a;background:rgba(22,214,42,.96);
  box-shadow:0 0 0 12px rgba(22,214,42,.18),0 18px 40px -12px rgba(0,0,0,.9);transition:transform .25s}
.gcf:hover .gcp2{transform:translate(-50%,-50%) scale(1.08)}
.gcf:focus-visible{outline:3px solid #7df59a;outline-offset:4px}
@media(max-width:1024px){
  .l3-game-cta{grid-template-columns:1fr;gap:34px}
  .gcm{order:-1}
  .gcf{width:min(260px,72%)}
}

/* --- sobreposicao --- */
#l3-game-ov{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  padding:clamp(8px,2.5vh,28px);background:rgba(2,3,8,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#l3-game-ov.on{display:flex;animation:l3gfade .28s ease-out}
@keyframes l3gfade{from{opacity:0}to{opacity:1}}
#l3-game-box{position:relative;width:min(460px,100%);height:min(860px,100%);aspect-ratio:460/860;
  border-radius:18px;overflow:hidden;background:#03060e;
  box-shadow:0 50px 120px -40px rgba(0,0,0,1),0 0 0 1px rgba(124,92,255,.35)}
#l3-game-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
#l3-game-x{position:absolute;right:10px;top:10px;z-index:5;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(4,10,18,.85);color:#eaf6ff;font-size:20px;
  line-height:1;cursor:pointer;display:grid;place-items:center}
#l3-game-x:hover{background:rgba(255,61,113,.9);border-color:transparent;color:#fff}
#l3-game-x:focus-visible{outline:3px solid #7df59a;outline-offset:2px}
#l3-game-ld{position:absolute;inset:0;display:grid;place-items:center;color:#6fc6dd;font-size:12px;letter-spacing:.18em}
body.l3-game-open{overflow:hidden}
@media(max-height:700px) and (min-width:900px){#l3-game-box{height:96vh;width:auto}}
/* L3GAME-END */

/* L3EYE-START */
/* O rotulo de duas cores que abre cada secao (.l3-eyebrow) ja tinha o mesmo tamanho
   em todo o site (13px), mas o espaco abaixo dele variava de -2px a 10px: quem manda
   nesse respiro e o row-gap do container do Elementor, que ia de 0 a 24px conforme a
   secao. Aqui o ritmo do bloco de texto que comeca com o rotulo fica igual em todas. */
@media(max-width:767px){
  [data-elementor-type="wp-page"] .e-con-inner:has(> .elementor-widget .l3-eyebrow),
  [data-elementor-type="wp-page"] .e-con:has(> .elementor-widget .l3-eyebrow){
    row-gap:14px!important}
  /* o rotulo em si: mesmo corpo, mesma entrelinha e nenhuma margem herdada do editor */
  .elementor-widget-container > .l3-eyebrow{
    font-size:13px!important;letter-spacing:.28em!important;line-height:1.35!important;
    margin:0!important}
  .elementor-widget:has(> .elementor-widget-container > .l3-eyebrow){margin-bottom:0!important}
}
/* L3EYE-END */

/* L3NOSIDE-START */
/* Estouro lateral no mobile. A pagina nao passa da largura em nenhum ponto (medido
   em 360, 390 e 414, parado e durante a rolagem). O que aparecia era o rubber-band:
   overflow-x:hidden no body CRIA um container de rolagem horizontal, e no toque da
   para arrastar de lado e ver o fundo. overflow-x:clip corta sem criar container,
   entao nao ha o que arrastar. overscroll-behavior-x corta o encadeamento/bounce. */
html{overflow-x:clip;max-width:100%;overscroll-behavior-x:none}
body{overflow-x:clip;max-width:100%;overscroll-behavior-x:none;position:relative}
/* navegador antigo sem suporte a clip continua com hidden, que ja e melhor que nada */
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}

/* o rotulo do FAQ vinha dentro de um widget HTML com margem propria, entao ficava
   com 24px abaixo enquanto o resto do site ficou com 2px */
@media(max-width:767px){
  /* -12px porque aqui o rotulo esta num widget HTML, sem a folga que o widget de
     texto deixa abaixo da linha: assim o respiro final bate os mesmos 2px do resto */
  .l3-faq-head{margin-bottom:-12px!important}
  .l3-faq-head .l3-eyebrow{font-size:13px!important;letter-spacing:.28em!important;
    line-height:1.35!important;margin:0!important}
}
/* L3NOSIDE-END */

/* L3LPHERO-START */
/* Hero de Landing Pages: LANDING solido em branco, PAGES em neon vazado, com um
   feixe de luz cruzando entre as duas linhas. O astronauta e background-image da
   secao, com a borda esquerda ja esfumada no proprio arquivo (webp com alpha). */
#lp-hero{background-blend-mode:normal}
#lp-hero .e-con-inner{position:relative;z-index:2}
/* nebulosa por tras do texto, para o lado esquerdo nao ficar chapado */
#lp-hero:before{content:""!important;position:absolute;inset:0;z-index:0;pointer-events:none;
  /* o neon so existe contra fundo escuro, e a nebulosa da arte nova e clara justamente
     atras do titulo; o escurecimento vai mais fundo ate ~55% e so entao abre para a arte */
  background:linear-gradient(90deg,rgba(6,3,16,.93) 0%,rgba(6,3,16,.88) 26%,rgba(6,3,16,.72) 42%,
    rgba(6,3,16,.4) 58%,rgba(6,3,16,.12) 72%,rgba(6,3,16,0) 84%);
  height:100%!important}

/* arte nova: composicao inteira, entao cobre a secao. No retrato do celular o corte
   por 'cover' jogaria o astronauta para fora, entao a ancora vai para 72% da largura. */
#lp-hero{background-size:cover!important;background-position:center right!important}
@media(max-width:1024px){#lp-hero{background-position:72% center!important}}
@media(max-width:767px){#lp-hero{background-position:70% center!important}}
/* h1 do tema vence por especificidade; prefixar com o id resolve */
#lp-hero .lp-title,/* Titulo fiel a referencia: as duas palavras em italico, LANDING com degrade do
   branco ao violeta e o brilho sangrando por BAIXO das letras (drop-shadow segue o
   contorno do glifo, diferente de text-shadow que borra a caixa toda), e PAGES em
   neon vazado com o miolo escuro. */
#lp-hero .lp-title,.lp-title{margin:0;line-height:.86;letter-spacing:-.035em;
  text-transform:uppercase;font-weight:900;font-style:italic;
  font-size:clamp(52px,7.6vw,116px);display:block;position:relative}
/* display:block SO nos dois filhos diretos. A regra antiga pegava todo span descendente,
   inclusive os .word que o Splitting cria, e cada palavra virava um bloco - por isso
   'Agentes de' quebrava em duas linhas (em 'Landing', palavra unica, nao aparecia). */
.lp-title > span{display:block}
.lp-title span{font-style:italic}
.lp-title .word{display:inline-block}
/* nenhuma linha do titulo pode quebrar. Com width:max-content + max-width:100%, quando a
   palavra nao cabia o navegador partia no meio ('DESENVOLVIME / NTO'). Com nowrap ela
   nunca parte, e quem nao couber e reduzido pelo ajuste automatico. */
.lp-l1,.lp-l2{white-space:nowrap}
/* O feixe fica colado na base do LANDING, e o respiro de 20px vem DEPOIS dele, antes
   do PAGES. Por isso o vao e uma variavel: o feixe sobe metade dela para sair do meio
   do vao e encostar nas letras. */
.lp-title{--lpgap:20px}
.lp-l1{margin-bottom:var(--lpgap)}

/* LANDING: degrade vertical + duas sombras descendentes, que criam o brilho embaixo */
.lp-l1{position:relative;color:transparent;
  background:linear-gradient(180deg,#fff 0%,#fff 58%,#f2ebff 74%,#cbb0ff 88%,#a273f0 100%);
  -webkit-background-clip:text;background-clip:text;
  /* deslocamento em em: o halo acompanha o corpo do titulo em vez de ficar com 4px
     fixos, que era muito para 34px e pouco para 116px */
  filter:drop-shadow(0 .037em .083em rgba(168,85,247,.62))
         drop-shadow(0 .092em .2em rgba(139,58,226,.34))}

/* PAGES: contorno claro na frente, halo violeta numa camada atras */
.lp-l2{position:relative;color:transparent;-webkit-text-stroke:2px #efe6ff;isolation:isolate}
/* tres camadas: halo no fundo (-2), preenchimento escuro no meio (-1) e o contorno na
   frente. Sem a camada do meio o text-shadow do halo pinta tambem o miolo do glifo e a
   letra deixa de ser vazada. */
.lp-l2:after{content:attr(data-t);position:absolute;left:0;top:0;z-index:-1;font-style:italic;
  color:rgba(9,4,22,.93);-webkit-text-stroke:0}
.lp-l2:before{content:attr(data-t);position:absolute;left:0;top:0;z-index:-2;font-style:italic;
  color:transparent;-webkit-text-stroke:2px #a855f7;
  text-shadow:0 0 6px rgba(200,150,255,.9),0 0 16px rgba(168,85,247,.62),
              0 0 38px rgba(147,51,234,.3);
  animation:lpPulse 3.2s ease-in-out infinite alternate}
@keyframes lpPulse{
  from{opacity:.8;text-shadow:0 0 5px rgba(200,150,255,.75),0 0 14px rgba(168,85,247,.48),0 0 32px rgba(147,51,234,.24)}
  to{opacity:1;text-shadow:0 0 9px rgba(214,175,255,.95),0 0 24px rgba(168,85,247,.72),0 0 52px rgba(147,51,234,.4)}
}

/* feixe de luz na emenda entre as duas linhas. Fica no .lp-title, e nao dentro do
   .lp-l1, porque o filter do LANDING criaria um contexto novo e duplicaria a linha */
/* O feixe nao atravessa o titulo inteiro: na referencia ele nasce um pouco antes do L,
   fica mais forte no primeiro terco e se apaga antes de chegar no fim de LANDING - o
   trecho da direita fica sem risco nenhum. */
.lp-title:after{content:"";position:absolute;left:-6%;width:56%;top:calc(50% - (var(--lpgap) / 2) - .075em - 1px);height:1.5px;
  pointer-events:none;transform-origin:left center;
  background:linear-gradient(90deg,rgba(167,85,247,0) 0%,rgba(196,162,255,.8) 10%,
    #fff 30%,rgba(214,180,255,.9) 46%,rgba(168,85,247,.45) 74%,rgba(167,85,247,0) 100%);
  box-shadow:0 0 10px rgba(168,85,247,.7),0 0 24px rgba(168,85,247,.4);
  animation:lpBeam 3.2s ease-in-out infinite}
@keyframes lpBeam{0%,100%{opacity:.6;transform:scaleX(.95)}50%{opacity:1;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.lp-l2:before,.lp-title:after{animation:none;opacity:1}}
/* tres atributos abaixo do subtitulo */
#lp-hero .elementor-widget-text-editor p{max-width:26ch}
.lp-feats{display:flex;flex-wrap:wrap;gap:14px 30px;margin:26px 0 4px}
.lp-feat{display:flex;align-items:center;gap:11px;font-size:.9375rem;line-height:1.32;color:#eae4ff;font-weight:600}
.lp-feat .lpi{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;color:#c4a2ff}
.lp-feat .lpi svg{width:26px;height:26px;filter:drop-shadow(0 0 8px rgba(168,85,247,.75))}

/* botoes */
.lp-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.lpb{display:inline-flex;align-items:center;gap:11px;padding:16px 30px;border-radius:999px;
  font-weight:700;font-size:1rem;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .25s}
.lpb:hover{transform:translateY(-2px)}
.lpb-solid{background:linear-gradient(135deg,#3df05a,#16d62a 60%,#0fb823);color:#04120a;
  box-shadow:0 16px 44px -16px rgba(22,214,42,.9),inset 0 1px 0 rgba(255,255,255,.45)}
.lpb-solid:hover{box-shadow:0 22px 56px -16px rgba(22,214,42,1),inset 0 1px 0 rgba(255,255,255,.45)}
.lpb-ghost{color:#fff;border:1px solid rgba(196,162,255,.55);background:rgba(20,10,40,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lpb-ghost svg{color:#16d62a}
.lpb-ghost:hover{border-color:#c4a2ff;background:rgba(40,20,72,.62)}
.lpb:focus-visible{outline:3px solid #c4a2ff;outline-offset:3px}

@media(max-width:1024px){
  #lp-hero:before{background:linear-gradient(180deg,rgba(8,4,20,.9) 0%,rgba(8,4,20,.78) 42%,rgba(8,4,20,.45) 68%,rgba(8,4,20,.2) 100%)}
}
@media(max-width:767px){
  #lp-hero .lp-title,.lp-title{font-size:clamp(44px,13.5vw,68px)!important;letter-spacing:-.03em;--lpgap:14px}
  .lp-feats{gap:12px 22px;margin:22px 0 2px}
  .lp-feat{font-size:.875rem}
  .lp-cta{gap:12px;margin-top:24px}
  .lpb{padding:14px 22px;font-size:.9375rem;flex:1 1 auto;justify-content:center}
}
/* L3LPHERO-END */

/* L3LPANIM-START */
/* Titulo animado letra a letra (Splitting quebra, GSAP anima).
   O vazado do PAGES depende de tres camadas empilhadas, e pseudo-elemento e um por
   elemento - ao quebrar em letras as camadas do nivel da palavra morrem. A saida e
   refazer as tres camadas em CADA letra, usando o data-char que o Splitting escreve. */
.lp-l2.splitting:before,.lp-l2.splitting:after{display:none}
.lp-l2 .char{position:relative;display:inline-block;color:transparent;
  -webkit-text-stroke:2px #efe6ff;isolation:isolate}
.lp-l2 .char:after{content:attr(data-char);position:absolute;left:0;top:0;z-index:-1;
  color:rgba(9,4,22,.93);-webkit-text-stroke:0}
.lp-l2 .char:before{content:attr(data-char);position:absolute;left:0;top:0;z-index:-2;
  color:transparent;-webkit-text-stroke:2px #a855f7;
  text-shadow:0 0 6px rgba(200,150,255,.9),0 0 16px rgba(168,85,247,.62),0 0 38px rgba(147,51,234,.3);
  animation:lpPulse 3.2s ease-in-out infinite alternate}
/* cada letra do LANDING carrega o proprio degrade; como ele e vertical e todas tem a
   mesma caixa de linha, o resultado e identico ao da palavra inteira */
.lp-l1.splitting{background:none;filter:none}
.lp-l1 .char{display:inline-block;color:transparent;
  background:linear-gradient(180deg,#fff 0%,#fff 58%,#f2ebff 74%,#cbb0ff 88%,#a273f0 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 9px rgba(168,85,247,.62)) drop-shadow(0 10px 22px rgba(139,58,226,.34))}
/* o espaco entre letras nao pode colapsar */
/* o span de espaco do Splitting contem so um espaco: como inline-block ele colapsa
   para largura zero e as palavras grudam (AGENTESDE). Largura explicita resolve. */
.lp-title .whitespace{display:inline-block;width:.26em}
/* varredura de luz que passa por cima das letras uma vez, no fim da entrada */
/* caixa que segura o facho: ele anda ate xPercent:120 e, solto, alargava o documento */
.lp-title .lp-sweepwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.lp-title .lp-sweep{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){.lp-l2 .char:before{animation:none;opacity:1}}
/* L3LPANIM-END */

/* L3LPHOT-START */
/* Focos de luz marcados na referencia: um no fim de LANDING, na altura da emenda,
   e outro embaixo, no fim de PAGES. Sao bolhas radiais, nao risco. */
.lp-hot{position:absolute;display:block;pointer-events:none;border-radius:50%;z-index:2;
  mix-blend-mode:screen}
.lp-hot-a{left:93.5%;top:calc(50% - (var(--lpgap) / 2) - .075em);width:27%;padding-bottom:9%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,255,255,.98),rgba(228,205,255,.62) 24%,rgba(178,120,255,.34) 48%,rgba(124,58,237,.14) 72%,rgba(124,58,237,0) 100%);
  animation:lpHot 3.2s ease-in-out infinite alternate}
.lp-hot-b{left:66%;top:96%;width:24%;padding-bottom:9%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(245,235,255,.9),rgba(196,140,255,.5) 36%,rgba(147,51,234,.2) 64%,rgba(147,51,234,0) 100%);
  animation:lpHot 3.2s ease-in-out .8s infinite alternate}
@keyframes lpHot{from{opacity:.55}to{opacity:1}}
/* geometria dos focos e a mesma no celular e no PC: tudo em % da linha */
@media(prefers-reduced-motion:reduce){.lp-hot{animation:none;opacity:.85}}

/* o rotulo acima do titulo e violeta nesta pagina, e nao no verde padrao do site */
#lp-hero .l3-eyebrow{color:#c4a2ff}
#lp-hero .l3-eyebrow em,#lp-hero .l3-eyebrow b,#lp-hero .l3-eyebrow strong{color:#a855f7;font-style:normal}
/* L3LPHOT-END */

/* L3LPGLOW-START */
/* O foco sobre o G nao e um ponto redondo: ele se estica para os dois lados, como
   flare de lente. Nucleo branco, decaindo para violeta, com um fio azulado nas pontas. */
/* o raio lateral ficava 85% para fora de cada lado e, no celular, passava da largura
   da tela: era o que sobrava de rolagem lateral depois de prender o facho. 46% mantem
   o alargamento visivel sem vazar. */
.lp-hot-a:before{content:"";position:absolute;left:-46%;right:-46%;top:50%;height:2px;
  transform:translateY(-50%);border-radius:2px;filter:blur(1px);
  background:linear-gradient(90deg,rgba(80,130,255,0) 0%,rgba(80,130,255,.4) 14%,
    rgba(168,85,247,.62) 30%,rgba(232,215,255,.92) 46%,#fff 50%,rgba(232,215,255,.92) 54%,
    rgba(168,85,247,.62) 70%,rgba(80,130,255,.4) 86%,rgba(80,130,255,0) 100%)}

/* onde o feixe cruza o L, o A e a primeira perna do N as letras pegam um brilho
   branco por baixo, alem do halo violeta que todas ja tem */
.lp-l1 .char:nth-child(-n+3){
  filter:drop-shadow(0 4px 9px rgba(168,85,247,.62))
         drop-shadow(0 10px 22px rgba(139,58,226,.34))
         drop-shadow(0 5px 9px rgba(255,255,255,.55))}
/* sem as bibliotecas nao ha letras separadas; a palavra inteira recebe uma dose menor */
.lp-l1:not(.splitting){filter:drop-shadow(0 4px 9px rgba(168,85,247,.62))
  drop-shadow(0 10px 22px rgba(139,58,226,.34)) drop-shadow(0 5px 10px rgba(255,255,255,.22))}

/* os raios laterais do feixe puxam para o azul junto do violeta */
.lp-title:after{box-shadow:0 0 9px rgba(168,85,247,.7),0 0 22px rgba(126,110,255,.45),
  0 0 42px rgba(80,130,255,.28)!important}
/* L3LPGLOW-END */

/* L3IAHERO2-START */
/* A hero de Agentes de IA reaproveita a estrutura da de Landing Pages (mesmas classes
   .lp-*), so trocando a paleta: aqui o neon e o verde da marca, nao o violeta. */
/* A arte e um close: em cover vira uma cabeca gigante ocupando a tela toda. Reduzida
   e ancorada a direita ela vira elemento de composicao, e a cor de fundo cobre o resto. */
#ia-hero{background-size:58% auto!important;background-position:right center!important}
#ia-hero:before{content:""!important;position:absolute;inset:0;z-index:0;pointer-events:none;
  height:100%!important;
  background:linear-gradient(90deg,rgba(2,10,6,.94) 0%,rgba(2,10,6,.9) 26%,rgba(2,10,6,.74) 42%,
    rgba(2,10,6,.42) 58%,rgba(2,10,6,.14) 72%,rgba(2,10,6,0) 84%)}
#ia-hero .e-con-inner{position:relative;z-index:2}
#ia-hero .l3-eyebrow{color:#7df0a4}

/* AGENTES DE: branco descendo para o verde */
#ia-hero .lp-l1{
  background:linear-gradient(180deg,#fff 0%,#fff 58%,#e6fff0 74%,#8ef2b4 88%,#22d36a 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 9px rgba(34,211,106,.6))
         drop-shadow(0 10px 22px rgba(16,160,78,.34))}
#ia-hero .lp-l1 .char{
  background:linear-gradient(180deg,#fff 0%,#fff 58%,#e6fff0 74%,#8ef2b4 88%,#22d36a 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 9px rgba(34,211,106,.6))
         drop-shadow(0 10px 22px rgba(16,160,78,.34))}
#ia-hero .lp-l1 .char:nth-child(-n+3){
  filter:drop-shadow(0 4px 9px rgba(34,211,106,.6))
         drop-shadow(0 10px 22px rgba(16,160,78,.34))
         drop-shadow(0 5px 9px rgba(255,255,255,.55))}

/* IA / CHATBOT: neon vazado verde */
#ia-hero .lp-l2,#ia-hero .lp-l2 .char{-webkit-text-stroke-color:#dcfce9}
#ia-hero .lp-l2:before,#ia-hero .lp-l2 .char:before{-webkit-text-stroke-color:#22d36a;
  text-shadow:0 0 6px rgba(150,255,190,.9),0 0 16px rgba(34,211,106,.62),0 0 38px rgba(16,160,78,.32)}
#ia-hero .lp-l2:after,#ia-hero .lp-l2 .char:after{color:rgba(3,14,8,.93)}
@keyframes lpPulseG{
  from{opacity:.8;text-shadow:0 0 5px rgba(150,255,190,.75),0 0 14px rgba(34,211,106,.48),0 0 32px rgba(16,160,78,.24)}
  to{opacity:1;text-shadow:0 0 9px rgba(180,255,210,.95),0 0 24px rgba(34,211,106,.72),0 0 52px rgba(16,160,78,.4)}
}
#ia-hero .lp-l2:before,#ia-hero .lp-l2 .char:before{animation-name:lpPulseG}

/* feixe e focos de luz em verde */
#ia-hero .lp-title:after{
  background:linear-gradient(90deg,rgba(34,211,106,0) 0%,rgba(150,255,190,.8) 10%,
    #fff 30%,rgba(180,255,210,.9) 46%,rgba(34,211,106,.45) 74%,rgba(34,211,106,0) 100%);
  box-shadow:0 0 9px rgba(34,211,106,.7),0 0 22px rgba(60,220,180,.42),
    0 0 42px rgba(0,224,255,.26)!important}
#ia-hero .lp-hot-a{
  background:radial-gradient(closest-side,rgba(255,255,255,.98),rgba(206,255,225,.62) 24%,
    rgba(90,240,160,.34) 48%,rgba(16,160,78,.14) 72%,rgba(16,160,78,0) 100%)}
#ia-hero .lp-hot-a:before{
  background:linear-gradient(90deg,rgba(0,224,255,0) 0%,rgba(0,224,255,.4) 14%,
    rgba(34,211,106,.62) 30%,rgba(215,255,232,.92) 46%,#fff 50%,rgba(215,255,232,.92) 54%,
    rgba(34,211,106,.62) 70%,rgba(0,224,255,.4) 86%,rgba(0,224,255,0) 100%)}
#ia-hero .lp-hot-b{
  background:radial-gradient(closest-side,rgba(235,255,244,.9),rgba(120,240,175,.5) 36%,
    rgba(16,160,78,.2) 64%,rgba(16,160,78,0) 100%)}

/* botao fantasma com borda verde nesta pagina */
#ia-hero .lpb-ghost{border-color:rgba(126,240,168,.5);background:rgba(4,26,14,.5)}
#ia-hero .lpb-ghost:hover{border-color:#7df0a4;background:rgba(8,44,24,.62)}
#ia-hero .lp-feat .lpi{color:#7df0a4}
#ia-hero .lp-feat .lpi svg{filter:drop-shadow(0 0 8px rgba(34,211,106,.75))}
#ia-hero .lp-feat{color:#e4fff0}
/* o titulo aqui e mais longo que LANDING PAGES: um corpo menor evita quebra feia */
#ia-hero .lp-title{font-size:clamp(52px,7.6vw,116px)!important;width:max-content;max-width:100%}
/* AGENTES DE e IA / CHATBOT nao podem quebrar no meio */
#ia-hero .lp-l1,#ia-hero .lp-l2{white-space:nowrap}
/* no celular o robo ficava embaixo, atras dos botoes; ancorado no topo ele fica
   visivel antes do texto e a hero abre com ele */
@media(max-width:1024px){#ia-hero{background-size:104% auto!important;background-position:center top!important}
  #ia-hero:before{background:linear-gradient(180deg,rgba(2,10,6,.92) 0%,rgba(2,10,6,.8) 42%,rgba(2,10,6,.5) 68%,rgba(2,10,6,.22) 100%)}}
@media(max-width:767px){#ia-hero .lp-title{font-size:clamp(27px,8.2vw,44px)!important}
  #ia-hero{background-size:128% auto!important;background-position:56% top!important}}

/* Automacao (Agentes de IA): no celular o robo entra pelo topo e a cortina escura
   que existe em todas as heros comia justamente a arte. Aqui ela sai - o texto ja
   fica legivel pelo degrade proprio da secao (#ia-hero:before). */
@media(max-width:1024px){#ia-hero .l3-hero-scrim{display:none!important}}
/* L3IAHERO2-END */

/* L3HEROCOR-START */
/* Variante lado a lado (Social Media, conforme a referencia enviada) */
.lp-title.lp-inline{white-space:nowrap;width:max-content;max-width:100%}
.lp-title.lp-inline > span{display:inline-block;vertical-align:baseline}
.lp-title.lp-inline .lp-l1{margin-bottom:0;margin-right:.24em}
/* com as palavras na mesma linha o feixe deixa de ser divisor: fica sob as duas */
.lp-title.lp-inline:after{top:auto;bottom:.06em;width:72%}
.lp-title.lp-inline .lp-hot-a{top:auto;bottom:.02em}

/* ---------- TRAFEGO PAGO: azul ---------- */
#tf-hero{background-size:cover!important;background-position:center right!important}
#tf-hero:before{content:""!important;position:absolute;inset:0;z-index:0;pointer-events:none;height:100%!important;
  background:linear-gradient(90deg,rgba(3,8,20,.94) 0%,rgba(3,8,20,.88) 26%,rgba(3,8,20,.7) 42%,
    rgba(3,8,20,.38) 58%,rgba(3,8,20,.12) 72%,rgba(3,8,20,0) 84%)}
#tf-hero .e-con-inner{position:relative;z-index:2}
#tf-hero .l3-eyebrow{color:#8ecbff}
#tf-hero .lp-l1,#tf-hero .lp-l1 .char{
  background:linear-gradient(180deg,#fff 0%,#fff 58%,#eaf5ff 74%,#96ccff 88%,#3b9bff 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 9px rgba(59,155,255,.6)) drop-shadow(0 10px 22px rgba(20,90,190,.34))}
#tf-hero .lp-l1 .char:nth-child(-n+3){filter:drop-shadow(0 4px 9px rgba(59,155,255,.6))
  drop-shadow(0 10px 22px rgba(20,90,190,.34)) drop-shadow(0 5px 9px rgba(255,255,255,.55))}
#tf-hero .lp-l2,#tf-hero .lp-l2 .char{-webkit-text-stroke-color:#dceeff}
#tf-hero .lp-l2:before,#tf-hero .lp-l2 .char:before{-webkit-text-stroke-color:#3b9bff;animation-name:lpPulseB;
  text-shadow:0 0 6px rgba(150,204,255,.9),0 0 16px rgba(59,155,255,.62),0 0 38px rgba(20,90,190,.32)}
#tf-hero .lp-l2:after,#tf-hero .lp-l2 .char:after{color:rgba(3,9,22,.93)}
@keyframes lpPulseB{
  from{opacity:.8;text-shadow:0 0 5px rgba(150,204,255,.75),0 0 14px rgba(59,155,255,.48),0 0 32px rgba(20,90,190,.24)}
  to{opacity:1;text-shadow:0 0 9px rgba(190,225,255,.95),0 0 24px rgba(59,155,255,.72),0 0 52px rgba(20,90,190,.4)}}
#tf-hero .lp-title:after{background:linear-gradient(90deg,rgba(59,155,255,0) 0%,rgba(150,204,255,.8) 10%,
  #fff 30%,rgba(190,225,255,.9) 46%,rgba(59,155,255,.45) 74%,rgba(59,155,255,0) 100%);
  box-shadow:0 0 9px rgba(59,155,255,.7),0 0 22px rgba(90,180,255,.42),0 0 42px rgba(255,190,80,.2)!important}
#tf-hero .lp-hot-a{background:radial-gradient(closest-side,rgba(255,255,255,.98),rgba(206,232,255,.62) 24%,
  rgba(90,175,255,.34) 48%,rgba(20,90,190,.14) 72%,rgba(20,90,190,0) 100%)}
#tf-hero .lp-hot-a:before{background:linear-gradient(90deg,rgba(255,190,80,0) 0%,rgba(255,190,80,.35) 14%,
  rgba(59,155,255,.62) 30%,rgba(215,238,255,.92) 46%,#fff 50%,rgba(215,238,255,.92) 54%,
  rgba(59,155,255,.62) 70%,rgba(255,190,80,.35) 86%,rgba(255,190,80,0) 100%)}
#tf-hero .lp-hot-b{background:radial-gradient(closest-side,rgba(235,246,255,.9),rgba(120,190,255,.5) 36%,
  rgba(20,90,190,.2) 64%,rgba(20,90,190,0) 100%)}

/* ---------- SOCIAL MEDIA: magenta ---------- */
#sm-hero{background-size:cover!important;background-position:center right!important}
#sm-hero:before{content:""!important;position:absolute;inset:0;z-index:0;pointer-events:none;height:100%!important;
  background:linear-gradient(90deg,rgba(10,4,18,.94) 0%,rgba(10,4,18,.88) 26%,rgba(10,4,18,.7) 42%,
    rgba(10,4,18,.38) 58%,rgba(10,4,18,.12) 72%,rgba(10,4,18,0) 84%)}
#sm-hero .e-con-inner{position:relative;z-index:2}
#sm-hero .l3-eyebrow{color:#c4a2ff}
/* Social usa o mesmo violeta do Landing Pages: sem override de cor aqui, o titulo
   herda a paleta base. So o miolo escuro segue a cor de fundo desta hero. */
#sm-hero .lp-l2:after,#sm-hero .lp-l2 .char:after{color:rgba(10,4,18,.93)}
@keyframes lpPulseM{
  from{opacity:.82;text-shadow:0 0 5px rgba(255,248,225,.75),0 0 14px rgba(255,212,94,.45),0 0 32px rgba(245,166,35,.22)}
  to{opacity:1;text-shadow:0 0 10px rgba(255,250,235,.98),0 0 26px rgba(255,212,94,.7),0 0 54px rgba(245,166,35,.4)}}





/* icones e botao fantasma em verde nas duas, como pedido */
#tf-hero .lp-feat .lpi,#sm-hero .lp-feat .lpi{color:#16d62a}
#tf-hero .lp-feat .lpi svg,#sm-hero .lp-feat .lpi svg{filter:drop-shadow(0 0 8px rgba(22,214,42,.7))}
#tf-hero .lpb-ghost,#sm-hero .lpb-ghost{border-color:rgba(126,240,168,.45);background:rgba(6,20,12,.5)}
#tf-hero .lpb-ghost:hover,#sm-hero .lpb-ghost:hover{border-color:#7df0a4;background:rgba(8,40,22,.6)}

/* mesmo corpo do titulo de Landing Pages, para as tres paginas ficarem iguais */
#tf-hero .lp-title{font-size:clamp(52px,7.6vw,116px)!important;width:max-content;max-width:100%}
#sm-hero .lp-title{font-size:clamp(52px,7.6vw,116px)!important;width:max-content;max-width:100%}
@media(max-width:1024px){
  #tf-hero:before,#sm-hero:before{background:linear-gradient(180deg,rgba(6,4,16,.92) 0%,rgba(6,4,16,.8) 42%,rgba(6,4,16,.5) 68%,rgba(6,4,16,.24) 100%)}
  #tf-hero,#sm-hero{background-position:70% center!important}
}
@media(max-width:767px){


}
/* L3HEROCOR-END */

/* L3STHERO-START */
/* Desenvolvimento de Sites: azul royal, mais fechado que o azul-ceu do Trafego Pago,
   para as duas paginas nao ficarem identicas. */
#st-hero{background-size:cover!important;background-position:center right!important}
#st-hero:before{content:""!important;position:absolute;inset:0;z-index:0;pointer-events:none;height:100%!important;
  background:linear-gradient(90deg,rgba(2,5,16,.94) 0%,rgba(2,5,16,.86) 26%,rgba(2,5,16,.62) 42%,
    rgba(2,5,16,.3) 58%,rgba(2,5,16,.08) 72%,rgba(2,5,16,0) 84%)}
#st-hero .e-con-inner{position:relative;z-index:2}
#st-hero .l3-eyebrow{color:#6ea8ff}
#st-hero .lp-l1,#st-hero .lp-l1 .char{
  background:linear-gradient(180deg,#fff 0%,#fff 60%,#e8f0ff 76%,#a8c6ff 90%,#4d7dff 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 9px rgba(61,110,255,.62)) drop-shadow(0 10px 22px rgba(24,58,190,.36))}
#st-hero .lp-l1 .char:nth-child(-n+3){filter:drop-shadow(0 .037em .083em rgba(61,110,255,.62))
  drop-shadow(0 10px 22px rgba(24,58,190,.36)) drop-shadow(0 5px 9px rgba(255,255,255,.55))}
#st-hero .lp-l2,#st-hero .lp-l2 .char{-webkit-text-stroke-color:#cfe0ff}
#st-hero .lp-l2:before,#st-hero .lp-l2 .char:before{-webkit-text-stroke-color:#2f6bff;animation-name:lpPulseR;
  text-shadow:0 0 6px rgba(140,180,255,.9),0 0 16px rgba(47,107,255,.66),0 0 38px rgba(24,58,190,.34)}
#st-hero .lp-l2:after,#st-hero .lp-l2 .char:after{color:rgba(2,6,20,.93)}
@keyframes lpPulseR{
  from{opacity:.8;text-shadow:0 0 5px rgba(140,180,255,.72),0 0 14px rgba(47,107,255,.5),0 0 32px rgba(24,58,190,.26)}
  to{opacity:1;text-shadow:0 0 10px rgba(180,208,255,.96),0 0 26px rgba(47,107,255,.76),0 0 56px rgba(24,58,190,.44)}}
#st-hero .lp-title:after{background:linear-gradient(90deg,rgba(47,107,255,0) 0%,rgba(140,180,255,.82) 10%,
  #fff 30%,rgba(180,208,255,.9) 46%,rgba(47,107,255,.45) 74%,rgba(47,107,255,0) 100%);
  box-shadow:0 0 9px rgba(47,107,255,.72),0 0 22px rgba(80,140,255,.44),0 0 42px rgba(24,58,190,.28)!important}
#st-hero .lp-hot-a{background:radial-gradient(closest-side,rgba(255,255,255,.98),rgba(206,224,255,.62) 24%,
  rgba(77,125,255,.36) 48%,rgba(24,58,190,.14) 72%,rgba(24,58,190,0) 100%)}
#st-hero .lp-hot-a:before{background:linear-gradient(90deg,rgba(0,224,255,0) 0%,rgba(0,224,255,.36) 14%,
  rgba(47,107,255,.62) 30%,rgba(215,230,255,.92) 46%,#fff 50%,rgba(215,230,255,.92) 54%,
  rgba(47,107,255,.62) 70%,rgba(0,224,255,.36) 86%,rgba(0,224,255,0) 100%)}
#st-hero .lp-hot-b{background:radial-gradient(closest-side,rgba(235,242,255,.9),rgba(120,160,255,.5) 36%,
  rgba(24,58,190,.2) 64%,rgba(24,58,190,0) 100%)}
#st-hero .lp-feat .lpi{color:#16d62a}
#st-hero .lp-feat .lpi svg{filter:drop-shadow(0 0 8px rgba(22,214,42,.7))}
#st-hero .lpb-ghost{border-color:rgba(126,240,168,.45);background:rgba(6,20,12,.5)}
#st-hero .lpb-ghost:hover{border-color:#7df0a4;background:rgba(8,40,22,.6)}
/* DESENVOLVIMENTO tem 15 letras: no corpo das outras heros passaria da coluna */
/* mesmo corpo do titulo de Landing Pages. Medido: a linha mais larga do site inteiro
   e DESENVOLVIMENTO, que a 109px da 1052px numa coluna de 1200 - cabe em todas. */
#st-hero .lp-title{font-size:clamp(52px,7.6vw,116px)!important;width:max-content;max-width:100%}
@media(max-width:1024px){#st-hero{background-position:72% center!important}
  #st-hero:before{background:linear-gradient(180deg,rgba(2,5,16,.92) 0%,rgba(2,5,16,.8) 42%,rgba(2,5,16,.5) 68%,rgba(2,5,16,.22) 100%)}}

/* L3STHERO-END */

/* L3CRMHERO-START */
/* CRM: verde da marca. Aqui a faixa de atributos e diferente das paginas de servico -
   sao quatro itens com titulo e descricao, nao tres chips de uma linha. */
#crm-hero{background-size:cover!important;background-position:center right!important}
/* dois degrades sobrepostos: um lateral, que limpa a area do titulo, e um da base para
   cima, que apaga a foto justamente onde ficam os quatro icones e as descricoes. Sem ele
   o notebook e a planta apareciam por tras do texto. */
#crm-hero:before{content:""!important;position:absolute;inset:0;z-index:0;pointer-events:none;height:100%!important;
  background:linear-gradient(90deg,rgba(3,7,9,.95) 0%,rgba(3,7,9,.88) 24%,rgba(3,7,9,.66) 40%,
      rgba(3,7,9,.34) 56%,rgba(3,7,9,.1) 72%,rgba(3,7,9,0) 100%),
    linear-gradient(0deg,#03070a 0%,rgba(3,7,10,.97) 16%,rgba(3,7,10,.86) 27%,
      rgba(3,7,10,.5) 38%,rgba(3,7,10,.16) 48%,rgba(3,7,10,0) 58%)}
/* a hero do CRM era centralizada; as outras sao alinhadas a esquerda, e centralizada
   o titulo caia em cima do notebook da foto */
#crm-hero .e-con-inner{position:relative;z-index:2;align-items:flex-start!important;text-align:left!important}
#crm-hero .e-con-inner > *{text-align:left}
#crm-hero .elementor-widget-text-editor p{max-width:46ch}
#crm-hero .lp-feats4{width:100%}
#crm-hero .l3-eyebrow{color:#16d62a}
#crm-hero .lp-l1,#crm-hero .lp-l1 .char{
  background:linear-gradient(180deg,#fff 0%,#fff 66%,#e9fff1 80%,#a8f5c6 92%,#4fe07f 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 9px rgba(22,214,42,.5)) drop-shadow(0 10px 22px rgba(12,140,50,.3))}
#crm-hero .lp-l1 .char:nth-child(-n+3){filter:drop-shadow(0 4px 9px rgba(22,214,42,.5))
  drop-shadow(0 10px 22px rgba(12,140,50,.3)) drop-shadow(0 5px 9px rgba(255,255,255,.5))}
#crm-hero .lp-l2,#crm-hero .lp-l2 .char{-webkit-text-stroke-color:#d8ffe6}
#crm-hero .lp-l2:before,#crm-hero .lp-l2 .char:before{-webkit-text-stroke-color:#16d62a;animation-name:lpPulseC;
  text-shadow:0 0 6px rgba(150,255,185,.9),0 0 16px rgba(22,214,42,.66),0 0 38px rgba(12,140,50,.34)}
#crm-hero .lp-l2:after,#crm-hero .lp-l2 .char:after{color:rgba(4,10,8,.93)}
@keyframes lpPulseC{
  from{opacity:.82;text-shadow:0 0 5px rgba(150,255,185,.72),0 0 14px rgba(22,214,42,.5),0 0 32px rgba(12,140,50,.26)}
  to{opacity:1;text-shadow:0 0 10px rgba(190,255,215,.96),0 0 26px rgba(22,214,42,.78),0 0 56px rgba(12,140,50,.44)}}
#crm-hero .lp-title:after{background:linear-gradient(90deg,rgba(22,214,42,0) 0%,rgba(150,255,185,.82) 10%,
  #fff 30%,rgba(190,255,215,.9) 46%,rgba(22,214,42,.45) 74%,rgba(22,214,42,0) 100%);
  box-shadow:0 0 9px rgba(22,214,42,.7),0 0 22px rgba(40,220,140,.42),0 0 42px rgba(12,140,50,.26)!important}
#crm-hero .lp-hot-a{background:radial-gradient(closest-side,rgba(255,255,255,.98),rgba(210,255,228,.62) 24%,
  rgba(79,224,127,.34) 48%,rgba(12,140,50,.14) 72%,rgba(12,140,50,0) 100%)}
#crm-hero .lp-hot-a:before{background:linear-gradient(90deg,rgba(0,224,255,0) 0%,rgba(0,224,255,.34) 14%,
  rgba(22,214,42,.6) 30%,rgba(220,255,235,.92) 46%,#fff 50%,rgba(220,255,235,.92) 54%,
  rgba(22,214,42,.6) 70%,rgba(0,224,255,.34) 86%,rgba(0,224,255,0) 100%)}
#crm-hero .lp-hot-b{background:radial-gradient(closest-side,rgba(235,255,244,.9),rgba(79,224,127,.5) 36%,
  rgba(12,140,50,.2) 64%,rgba(12,140,50,0) 100%)}
#crm-hero .lp-title{font-size:clamp(52px,7.6vw,116px)!important;width:max-content;max-width:100%}

/* faixa de quatro atributos, com icone em caixa vazada e descricao */
/* quatro colunas alinhadas. O que fazia os itens sumirem na foto nao era o numero de
   colunas e sim o fundo: agora o CRM tem um escurecimento na base da hero (ver abaixo),
   entao a faixa toda cai sobre area limpa. */
.lp-feats4{display:grid;gap:26px 30px;margin-top:34px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.lp-f4{display:flex;gap:14px;align-items:flex-start}
.lp-f4 .lpi4{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  border:1px solid rgba(22,214,42,.45);background:rgba(6,26,14,.5);color:#16d62a;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lp-f4 .lpi4 svg{width:24px;height:24px;filter:drop-shadow(0 0 7px rgba(22,214,42,.6))}
.lp-f4 b{display:block;font-size:.9375rem;font-weight:700;color:#fff;line-height:1.3;margin-bottom:5px}
.lp-f4 span{display:block;font-size:.8125rem;line-height:1.55;color:#b9c6c0}
@media(max-width:1024px){.lp-feats4{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
  #crm-hero{background-position:72% center!important}
  #crm-hero:before{background:linear-gradient(180deg,rgba(3,7,9,.93) 0%,rgba(3,7,9,.82) 42%,rgba(3,7,9,.58) 68%,rgba(3,7,9,.34) 100%)}}
@media(max-width:600px){.lp-feats4{grid-template-columns:1fr;gap:18px}
}
/* L3CRMHERO-END */

/* L3HOMETIT-START */
/* Os clamps de mobile abaixo continuam como fallback para quem estiver sem JS. Com JS,
   fitLpTitle() sobrescreve inline para o titulo ocupar 92% da coluna em toda hero. */
/* Titulo da home com o mesmo efeito das paginas de servico. So o titulo: o video de
   fundo, o scrim e o resto da hero ficam como estao. */
#home-hero .lp-title{font-size:clamp(52px,7.6vw,116px)!important;width:max-content;max-width:100%}
@media(max-width:767px){#home-hero .lp-title{font-size:clamp(28px,8vw,44px)!important}}
/* No celular o titulo da home usa o MESMO corpo da Landing Pages. So que 'nao so
   cliques' tem o dobro de letras de 'Landing', entao nesse tamanho ele nao cabe numa
   linha - por isso a home e a unica que pode quebrar (.lp-wrap). O 18.7vw reproduz o
   que o ajuste automatico entrega na Landing: 67px em 360, 73px em 390. */
/* o hero da home tem video atras: o miolo vazado precisa de um preto mais opaco para
   as letras nao deixarem o video aparecer por dentro */
#home-hero .lp-l2:after,#home-hero .lp-l2 .char:after{color:rgba(4,6,16,.9)}
/* L3HOMETIT-END */

/* L3MIHERO-START */
/* Midia Indoor: violeta, como na referencia. Mesmo corpo de titulo das outras heros. */
#mi-hero{background-size:cover!important;background-position:center right!important}
#mi-hero:before{content:""!important;position:absolute;inset:0;z-index:0;pointer-events:none;height:100%!important;
  background:linear-gradient(90deg,rgba(4,4,14,.95) 0%,rgba(4,4,14,.9) 26%,rgba(4,4,14,.72) 42%,
    rgba(4,4,14,.4) 58%,rgba(4,4,14,.12) 74%,rgba(4,4,14,0) 86%)}
#mi-hero .e-con-inner{position:relative;z-index:2}
#mi-hero .l3-eyebrow{color:#c4a2ff}
#mi-hero .lp-feat .lpi{color:#16d62a}
#mi-hero .lp-feat .lpi svg{filter:drop-shadow(0 0 8px rgba(22,214,42,.7))}
#mi-hero .lpb-ghost{border-color:rgba(126,240,168,.45);background:rgba(6,20,12,.5)}
#mi-hero .lpb-ghost:hover{border-color:#7df0a4;background:rgba(8,40,22,.6)}
#mi-hero .lp-title{font-size:clamp(52px,7.6vw,116px)!important;width:max-content;max-width:100%}
@media(max-width:1024px){#mi-hero{background-position:66% center!important}
  #mi-hero:before{background:linear-gradient(180deg,rgba(4,4,14,.92) 0%,rgba(4,4,14,.8) 42%,rgba(4,4,14,.5) 68%,rgba(4,4,14,.24) 100%)}}
/* L3MIHERO-END */

/* L3NOSIDE2-START */
/* Rede de seguranca: os enfeites do titulo (facho, focos, raios) sao decorativos e
   nao podem participar do calculo de largura do documento. overflow:clip no widget
   do titulo corta o que passar sem criar container de rolagem. */
.elementor-widget:has(> .elementor-widget-container > .lp-title){overflow-x:clip}
@supports not (overflow-x:clip){
  .elementor-widget:has(> .elementor-widget-container > .lp-title){overflow-x:hidden}
}
/* L3NOSIDE2-END */

/* L3TITSCALE-START */
/* ESCALA TIPOGRAFICA DO TITULO DE HERO
   Desktop e celular sao dois patamares diferentes, nao o mesmo numero. Num display
   italico pesado a 390px, um H1 de hero fica entre 34 e 42px - 76px era corpo de
   desktop numa tela de celular, e empurrava subtitulo, atributos e botoes para fora.
   Uma escala unica para todas as heros, medida para a linha mais longa do site
   (DESENVOLVIMENTO) caber numa linha em 360px. */
@media(max-width:767px){
  #home-hero .lp-title,#lp-hero .lp-title,#tf-hero .lp-title,#sm-hero .lp-title,
  #st-hero .lp-title,#ia-hero .lp-title,#mi-hero .lp-title,#crm-hero .lp-title,#bl-hero .lp-title,#cs-hero .lp-title,#sv-hero .lp-title,#qs-hero .lp-title{
    /* +30% sobre a escala anterior (28/8.9vw/42), a pedido: 42px em 360, 45px em 390 */
    font-size:clamp(36px,11.6vw,55px)!important;width:max-content;max-width:100%}
  /* o respiro entre as linhas acompanha o corpo menor */
  .lp-title{--lpgap:15px}
}
@media(min-width:768px) and (max-width:1024px){
  #home-hero .lp-title,#lp-hero .lp-title,#tf-hero .lp-title,#sm-hero .lp-title,
  #st-hero .lp-title,#ia-hero .lp-title,#mi-hero .lp-title,#crm-hero .lp-title,#bl-hero .lp-title,#cs-hero .lp-title,#sv-hero .lp-title,#qs-hero .lp-title{
    font-size:clamp(42px,6.4vw,66px)!important}
  .lp-title{--lpgap:16px}
}

/* FEIXE DE LUZ E FOCOS: sempre EM CIMA das letras, nunca no vazio ao lado.
   O posicionamento e em % da caixa do titulo, mas essa caixa tem a largura da linha
   mais larga - e em heros centralizadas a linha curta ainda fica no meio da caixa.
   Com % fixa o fim do feixe e o foco caiam fora do texto. O l3-fx.js mede as duas
   linhas e publica onde cada uma comeca (--l1x) e quanto ocupa (--l1w), em % da caixa;
   daqui para frente todo o brilho e calculado sobre a LINHA, nao sobre a caixa.
   mix-blend-mode:screen faz a luz acender o glifo em vez de cobri-lo. */
.lp-title{--l1x:0;--l1w:100;--l2x:0;--l2w:100}
.lp-title:after{left:calc((var(--l1x) + var(--l1w) * .025) * 1%)!important;
  width:calc(var(--l1w) * .70 * 1%)!important;mix-blend-mode:screen;z-index:4}
.lp-title.lp-inline:after{width:calc(var(--l1w) * .84 * 1%)!important}
.lp-hot{mix-blend-mode:screen}
/* os focos acompanham o corpo da linha: com largura fixa em % da caixa, numa linha
   curta a bolha era maior que a propria palavra e vazava pelas pontas */
.lp-hot-a{left:calc((var(--l1x) + var(--l1w) * .92) * 1%)!important;
  width:calc(var(--l1w) * .16 * 1%)!important}
.lp-hot-a:before{left:-25%!important;right:-25%!important}
.lp-hot-b{left:calc((var(--l2x) + var(--l2w) * .66) * 1%)!important;
  width:calc(var(--l2w) * .24 * 1%)!important}

/* L3TITSCALE-END */

/* L3BLHERO-START */
/* Blog: mesma hero das paginas de servico, na paleta violeta do Landing Pages. */
#bl-hero{background-size:cover!important;background-position:center right!important}
#bl-hero:before{content:""!important;position:absolute;inset:0;z-index:0;pointer-events:none;height:100%!important;
  background:linear-gradient(90deg,rgba(6,3,18,.95) 0%,rgba(6,3,18,.9) 26%,rgba(6,3,18,.72) 42%,
    rgba(6,3,18,.4) 58%,rgba(6,3,18,.12) 74%,rgba(6,3,18,0) 86%)}
#bl-hero .e-con-inner{position:relative;z-index:2}
#bl-hero .l3-eyebrow{color:#c4a2ff}
#bl-hero .lp-l2:after,#bl-hero .lp-l2 .char:after{color:rgba(6,3,18,.93)}
#bl-hero .lp-feat .lpi{color:#16d62a}
#bl-hero .lp-feat .lpi svg{filter:drop-shadow(0 0 8px rgba(22,214,42,.7))}
#bl-hero .lpb-ghost{border-color:rgba(126,240,168,.45);background:rgba(6,20,12,.5)}
#bl-hero .lpb-ghost:hover{border-color:#7df0a4;background:rgba(8,40,22,.6)}
@media(min-width:1025px){
  #bl-hero .lp-title{font-size:clamp(52px,7.6vw,116px)!important;width:max-content;max-width:100%}
}
#bl-hero .elementor-widget-text-editor p{max-width:44ch}
@media(max-width:1024px){#bl-hero{background-position:70% center!important}
  #bl-hero:before{background:linear-gradient(180deg,rgba(6,3,18,.92) 0%,rgba(6,3,18,.8) 42%,rgba(6,3,18,.52) 68%,rgba(6,3,18,.26) 100%)}}
/* L3BLHERO-END */

/* L3GENHERO-START */
/* Cases, Solucoes e Quem somos: mesmo titulo neon das heros de servico, sobre o video
   que ja estava ali. Sao as unicas heros CENTRALIZADAS do site, e isso muda duas
   coisas: as copias :before/:after do PAGES precisam ocupar a linha inteira para
   centralizar junto (senao o halo fica encostado a esquerda), e o feixe/focos se
   apoiam no --l1x que o l3-fx.js publica. Paleta: o verde da marca. */
#cs-hero .lp-title,#sv-hero .lp-title,#qs-hero .lp-title{
  font-size:clamp(52px,7.6vw,116px)!important;width:max-content;max-width:100%;margin-inline:auto}
#cs-hero .lp-l2:before,#cs-hero .lp-l2:after,
#sv-hero .lp-l2:before,#sv-hero .lp-l2:after,
#qs-hero .lp-l2:before,#qs-hero .lp-l2:after{left:0;width:100%;text-align:center}
#cs-hero .lp-l1,#sv-hero .lp-l1,#qs-hero .lp-l1,
#cs-hero .lp-l1 .char,#sv-hero .lp-l1 .char,#qs-hero .lp-l1 .char{
  background:linear-gradient(180deg,#fff 0%,#fff 58%,#e6fff0 74%,#8ef2b4 88%,#22d36a 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 .037em .083em rgba(34,211,106,.6))
         drop-shadow(0 .092em .2em rgba(16,160,78,.34))}
#cs-hero .lp-l2,#sv-hero .lp-l2,#qs-hero .lp-l2,
#cs-hero .lp-l2 .char,#sv-hero .lp-l2 .char,#qs-hero .lp-l2 .char{-webkit-text-stroke-color:#dcfce9}
#cs-hero .lp-l2:before,#sv-hero .lp-l2:before,#qs-hero .lp-l2:before,
#cs-hero .lp-l2 .char:before,#sv-hero .lp-l2 .char:before,#qs-hero .lp-l2 .char:before{
  -webkit-text-stroke-color:#22d36a;animation-name:lpPulseG;
  text-shadow:0 0 6px rgba(150,255,190,.9),0 0 16px rgba(34,211,106,.62),0 0 38px rgba(16,160,78,.32)}
#cs-hero .lp-l2:after,#sv-hero .lp-l2:after,#qs-hero .lp-l2:after,
#cs-hero .lp-l2 .char:after,#sv-hero .lp-l2 .char:after,#qs-hero .lp-l2 .char:after{color:rgba(3,14,8,.93)}
#cs-hero .lp-title:after,#sv-hero .lp-title:after,#qs-hero .lp-title:after{
  background:linear-gradient(90deg,rgba(34,211,106,0) 0%,rgba(150,255,190,.8) 10%,
    #fff 30%,rgba(180,255,210,.9) 46%,rgba(34,211,106,.45) 74%,rgba(34,211,106,0) 100%);
  box-shadow:0 0 9px rgba(34,211,106,.7),0 0 22px rgba(60,220,180,.42),0 0 42px rgba(0,224,255,.26)!important}
#cs-hero .lp-hot-a,#sv-hero .lp-hot-a,#qs-hero .lp-hot-a{
  background:radial-gradient(closest-side,rgba(255,255,255,.98),rgba(206,255,225,.62) 24%,
    rgba(90,240,160,.34) 48%,rgba(16,160,78,.14) 72%,rgba(16,160,78,0) 100%)}
#cs-hero .lp-hot-b,#sv-hero .lp-hot-b,#qs-hero .lp-hot-b{
  background:radial-gradient(closest-side,rgba(235,255,244,.9),rgba(120,240,175,.5) 36%,
    rgba(16,160,78,.2) 64%,rgba(16,160,78,0) 100%)}
/* L3GENHERO-END */
/* L3QSHERO-START */
/* Quem somos, conforme a referencia: foto da equipe ancorada a direita, texto a
   ESQUERDA e paleta violeta (a mesma de Landing Pages) - nao o verde das outras duas
   heros gerais. O video foi trocado pela imagem, entao a cortina volta a ser um
   degrade horizontal: escuro atras do texto, aberto sobre a foto. */
#qs-hero{position:relative;background-size:cover!important;background-position:center right!important}
#qs-hero:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;height:100%!important;
  background:linear-gradient(90deg,rgba(6,3,16,.96) 0%,rgba(6,3,16,.93) 28%,rgba(6,3,16,.84) 44%,
    rgba(6,3,16,.6) 60%,rgba(6,3,16,.28) 78%,rgba(6,3,16,.08) 100%)}
#qs-hero .e-con-inner{position:relative;z-index:2}
#qs-hero .lp-title{margin-inline:0}
#qs-hero .lp-l2:before,#qs-hero .lp-l2:after{width:auto;text-align:left}
/* volta ao violeta: os seletores verdes do bloco geral tambem pegam #qs-hero */
#qs-hero .lp-l1,#qs-hero .lp-l1 .char{
  background:linear-gradient(180deg,#fff 0%,#fff 58%,#f2ebff 74%,#cbb0ff 88%,#a273f0 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 .037em .083em rgba(168,85,247,.62)) drop-shadow(0 .092em .2em rgba(139,58,226,.34))}
#qs-hero .lp-l2,#qs-hero .lp-l2 .char{-webkit-text-stroke-color:#efe6ff}
#qs-hero .lp-l2:before,#qs-hero .lp-l2 .char:before{-webkit-text-stroke-color:#a855f7;animation-name:lpPulse;
  text-shadow:0 0 6px rgba(200,150,255,.9),0 0 16px rgba(168,85,247,.62),0 0 38px rgba(147,51,234,.3)}
#qs-hero .lp-l2:after,#qs-hero .lp-l2 .char:after{color:rgba(9,4,22,.93)}
#qs-hero .lp-title:after{
  background:linear-gradient(90deg,rgba(167,85,247,0) 0%,rgba(196,162,255,.8) 10%,#fff 30%,
    rgba(214,180,255,.9) 46%,rgba(168,85,247,.45) 74%,rgba(167,85,247,0) 100%);
  box-shadow:0 0 10px rgba(168,85,247,.7),0 0 24px rgba(168,85,247,.4)!important}
#qs-hero .lp-hot-a{background:radial-gradient(closest-side,rgba(255,255,255,.98),rgba(228,205,255,.62) 24%,rgba(178,120,255,.34) 48%,rgba(124,58,237,.14) 72%,rgba(124,58,237,0) 100%)}
#qs-hero .lp-hot-b{background:radial-gradient(closest-side,rgba(245,235,255,.9),rgba(196,140,255,.5) 36%,rgba(147,51,234,.2) 64%,rgba(147,51,234,0) 100%)}
#qs-hero .l3-eyebrow{color:#c4a2ff}
#qs-hero .l3-eyebrow em,#qs-hero .l3-eyebrow b,#qs-hero .l3-eyebrow strong{color:#a855f7;font-style:normal}
#qs-hero .elementor-widget-text-editor p{max-width:46ch}
@media(max-width:1024px){#qs-hero{background-position:70% center!important}
  #qs-hero:before{background:linear-gradient(180deg,rgba(6,3,16,.9) 0%,rgba(6,3,16,.8) 44%,rgba(6,3,16,.6) 72%,rgba(6,3,16,.4) 100%)}}
/* L3QSHERO-END */

/* L3CSCOR-START */
/* Cases de Sucesso volta para a paleta violeta do Landing Pages: o bloco geral das
   heros (L3GENHERO) pinta as tres em verde, aqui isso e desfeito so para #cs-hero. */
#cs-hero .lp-l1,#cs-hero .lp-l1 .char{
  background:linear-gradient(180deg,#fff 0%,#fff 58%,#f2ebff 74%,#cbb0ff 88%,#a273f0 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 .037em .083em rgba(168,85,247,.62)) drop-shadow(0 .092em .2em rgba(139,58,226,.34))}
#cs-hero .lp-l2,#cs-hero .lp-l2 .char{-webkit-text-stroke-color:#efe6ff}
#cs-hero .lp-l2:before,#cs-hero .lp-l2 .char:before{-webkit-text-stroke-color:#a855f7;animation-name:lpPulse;
  text-shadow:0 0 6px rgba(200,150,255,.9),0 0 16px rgba(168,85,247,.62),0 0 38px rgba(147,51,234,.3)}
#cs-hero .lp-l2:after,#cs-hero .lp-l2 .char:after{color:rgba(9,4,22,.93)}
#cs-hero .lp-title:after{
  background:linear-gradient(90deg,rgba(167,85,247,0) 0%,rgba(196,162,255,.8) 10%,#fff 30%,
    rgba(214,180,255,.9) 46%,rgba(168,85,247,.45) 74%,rgba(167,85,247,0) 100%);
  box-shadow:0 0 10px rgba(168,85,247,.7),0 0 24px rgba(168,85,247,.4)!important}
#cs-hero .lp-hot-a{background:radial-gradient(closest-side,rgba(255,255,255,.98),rgba(228,205,255,.62) 24%,rgba(178,120,255,.34) 48%,rgba(124,58,237,.14) 72%,rgba(124,58,237,0) 100%)}
#cs-hero .lp-hot-a:before{background:linear-gradient(90deg,rgba(168,85,247,0) 0%,rgba(168,85,247,.45) 16%,rgba(214,180,255,.9) 42%,#fff 50%,rgba(214,180,255,.9) 58%,rgba(168,85,247,.45) 84%,rgba(168,85,247,0) 100%)}
#cs-hero .lp-hot-b{background:radial-gradient(closest-side,rgba(245,235,255,.9),rgba(196,140,255,.5) 36%,rgba(147,51,234,.2) 64%,rgba(147,51,234,0) 100%)}
#cs-hero .l3-eyebrow{color:#c4a2ff}
#cs-hero .l3-eyebrow em,#cs-hero .l3-eyebrow b,#cs-hero .l3-eyebrow strong{color:#a855f7;font-style:normal}
/* L3CSCOR-END */

/* L3BTNHOV-START */
/* HOVER DOS BOTOES CHEIOS: a regra global `a:hover{color:var(--accent-hover)}` tem
   especificidade (0,1,1) por causa do seletor de ELEMENTO e vencia .lpb-solid e
   .nav-cta (0,1,0) - o texto virava verde claro sobre fundo verde e sumia.
   Ancorar a cor no estado :hover/:focus leva o seletor a (0,2,0) e o texto fica escuro. */
.nav-cta,.nav-cta:hover,.nav-cta:focus,.nav-cta:active,.nav-cta:focus-visible{color:var(--accent-contrast)}
.nav-cta:hover .nav-cta-label,.nav-cta:hover .icon-chip,.nav-cta:hover svg{color:var(--accent-contrast)}
.lpb-solid,.lpb-solid:hover,.lpb-solid:focus,.lpb-solid:active,.lpb-solid:focus-visible{color:#04120a}
.lpb-solid:hover svg,.lpb-solid:focus svg{color:#04120a}
/* L3BTNHOV-END */

/* L3TITPC-START */
/* TITULO DE HERO NO DESKTOP DE NOTEBOOK (1025-1599px)
   O corpo era clamp(52px,7.6vw,116px): 104px em 1366 e 109px em 1440, e com duas
   linhas de line-height .86 o titulo passava por baixo do header fixo. Reduzido para
   6.4vw/102px nessa faixa. Celular (<=767), tablet (768-1024) e telas grandes
   (>=1600) ficam exatamente como estavam. */
@media(min-width:1025px) and (max-width:1599px){
  #home-hero .lp-title,#lp-hero .lp-title,#tf-hero .lp-title,#sm-hero .lp-title,
  #st-hero .lp-title,#ia-hero .lp-title,#mi-hero .lp-title,#crm-hero .lp-title,
  #bl-hero .lp-title,#cs-hero .lp-title,#sv-hero .lp-title,#qs-hero .lp-title{
    font-size:clamp(52px,6.4vw,102px)!important}
  /* respiro entre a linha de cima e a de baixo: 20px -> 10px */
  #home-hero .lp-title,#lp-hero .lp-title,#tf-hero .lp-title,#sm-hero .lp-title,
  #st-hero .lp-title,#ia-hero .lp-title,#mi-hero .lp-title,#crm-hero .lp-title,
  #bl-hero .lp-title,#cs-hero .lp-title,#sv-hero .lp-title,#qs-hero .lp-title{--lpgap:10px}
}
/* L3TITPC-END */

/* L3WAFAB-START */
/* BOTAO FLUTUANTE DO WHATSAPP
   No hover a regra global a:hover{color:var(--accent-hover)} (0,1,1) vencia .wa-fab
   (0,1,0): o icone, que e fill:currentColor, virava verde claro sobre o verde da
   pilula e parecia apagado. E o rotulo "Fale no WhatsApp" era branco sobre #16d62a
   (contraste 1,97:1) - ilegivel. Agora o fundo escurece no hover e texto+icone ficam
   brancos puros em todos os estados (contraste ~5,5:1). */
.wa-fab,.wa-fab:hover,.wa-fab:focus,.wa-fab:active,.wa-fab:focus-visible{color:#fff}
.wa-fab:hover{background:#0b7c1a}
.wa-fab:hover .wa-ic,.wa-fab:focus .wa-ic,
.wa-fab:hover .wa-ic svg,.wa-fab:focus .wa-ic svg{color:#fff;fill:#fff;opacity:1}
.wa-fab:hover .wa-label,.wa-fab:focus .wa-label{color:#fff;opacity:1}
/* L3WAFAB-END */

/* L3HOMENOSHADOW-START */
/* Hero da home sem a sombra desfocada da base e sem o escurecido do topo (pedido do cliente, 2026-09-11). */
#home-hero,.elementor-66 > .e-con:first-child{box-shadow:none!important}
#home-hero .l3-hero-scrim,.elementor-66 .l3-hero-scrim{display:none!important}
#home-hero::before,.elementor-66 > .e-con:first-child::before{content:none!important;background:none!important}
/* L3HOMENOSHADOW-END */
/* L3CONTATONOSHADOW-START */
/* Hero de /contato/ (pedido do cliente, 2026-09-11): sem a sombra desfocada e sem o escurecido do topo;
   o degrade da base fica mais baixo e mais transparente para nao tampar o video. Titulo intocado. */
.elementor-86 > .e-con:first-child{box-shadow:none!important}
.elementor-86 .l3-hero-scrim{display:none!important}
.elementor-86 > .e-con:first-child::before{content:none!important;background:none!important}
.elementor-86 > .e-con:first-child::after{height:24%!important;
  background:linear-gradient(180deg,rgba(1,2,4,0) 0%,rgba(1,2,4,.22) 50%,rgba(1,2,4,.55) 100%)!important}
/* L3CONTATONOSHADOW-END */
/* L3CTHERO-START */
/* /contato/ (pagina 86, hero #ct-hero): mesmo titulo neon do Landing Pages (paleta violeta padrao do
   componente lp-title), centralizado como as heros de Cases/Solucoes. So esta pagina. Altura do hero igual
   a da home; o video de fundo continua o mesmo. 2026-09-11 */
#ct-hero .lp-title{font-size:clamp(52px,7.6vw,116px)!important;width:max-content;max-width:100%;margin-inline:auto}
#ct-hero .lp-l2:before,#ct-hero .lp-l2:after{left:0;width:100%;text-align:center}
#ct-hero .l3-eyebrow{color:#c4a2ff}
#ct-hero .l3-eyebrow em,#ct-hero .l3-eyebrow b,#ct-hero .l3-eyebrow strong{color:#a855f7;font-style:normal}
@media(max-width:767px){
  #ct-hero .lp-title{font-size:clamp(36px,11.6vw,55px)!important}
}
@media(min-width:768px) and (max-width:1024px){
  #ct-hero .lp-title{font-size:clamp(42px,6.4vw,66px)!important}
}
@media(min-width:1025px) and (max-width:1599px){
  #ct-hero .lp-title{font-size:clamp(52px,6.4vw,102px)!important;--lpgap:10px}
}
.elementor-86 > .e-con:first-child{min-height:min(100vh,1100px)!important;justify-content:center!important}
@media(max-width:767px){
  .elementor-86 > .e-con:first-child{min-height:min(88vh,760px)!important}
}
/* L3CTHERO-END */
/* L3CSHEROH-START */
/* /cases/ (pagina 71): hero com a mesma altura da home e de /contato/, conteudo centralizado na vertical.
   Video/fundo intocados. 2026-09-11 */
.elementor-71 > .e-con:first-child{min-height:min(100vh,1100px)!important;justify-content:center!important}
@media(max-width:767px){
  .elementor-71 > .e-con:first-child{min-height:min(88vh,760px)!important}
}
/* L3CSHEROH-END */
/* L3CSNOSHADOW-START */
/* /cases/ (pagina 71): hero sem box-shadow e sem o escurecido do topo, igual a /contato/. Degrade da base
   e neon do titulo intocados. 2026-09-11 */
.elementor-71 > .e-con:first-child{box-shadow:none!important}
.elementor-71 .l3-hero-scrim{display:none!important}
.elementor-71 > .e-con:first-child::before{content:none!important;background:none!important}
/* L3CSNOSHADOW-END */

/* L3GAMELNK-START */
/* Os dois convites do jogo na home viraram LINKS reais para /game/ (antes eram
   <button> que abriam a sobreposicao). Como agora sao <a>, a regra global
   a:hover{color:var(--accent-hover)} tem especificidade (0,1,1) e venceria .gcb
   (0,1,0): o texto do botao verde viraria verde claro. Por isso a cor fica ancorada
   no proprio estado (.gcb:hover = 0,2,0) - mesma licao do bloco L3BTNHOV. */
a.gcb,a.gcf{text-decoration:none}
a.gcb,a.gcb:link,a.gcb:visited,a.gcb:hover,a.gcb:focus,a.gcb:active{color:#04120a}
a.gcf,a.gcf:link,a.gcf:visited,a.gcf:hover,a.gcf:focus,a.gcf:active{color:inherit}
a.gcf{box-sizing:border-box}
/* L3GAMELNK-END *//* End custom CSS */