/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[13].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/privacidade/page.tsx","import":"Inter","arguments":[{"subsets":["latin"],"weight":["400","500","600","700"],"variable":"--font-inter","display":"swap"}],"variableName":"inter"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Inter_8b3a0b';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Inter_Fallback_8b3a0b';src: local("Arial");ascent-override: 90.49%;descent-override: 22.56%;line-gap-override: 0.00%;size-adjust: 107.06%
}.__className_8b3a0b {font-family: '__Inter_8b3a0b', '__Inter_Fallback_8b3a0b';font-style: normal
}.__variable_8b3a0b {--font-inter: '__Inter_8b3a0b', '__Inter_Fallback_8b3a0b'
}

/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./app/new/nu.css ***!
  \************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   /new — design system da skill ui-ux-pro-max (design-system/omnietalk/MASTER.md)
   Estilo: Brutalismo. Cantos 0px, bordas visíveis, grade aparente, tipografia
   pesada, alto contraste, layout assimétrico. Tokens semânticos, nunca hex
   solto nos componentes. Tudo escopado em .nu.
   ═══════════════════════════════════════════════════════════════════════════ */
.nu {
  /* cores (MASTER.md) */
  --color-primary: #0F172A;        --color-on-primary: #FFFFFF;
  --color-secondary: #334155;      --color-on-secondary: #FFFFFF;
  --color-accent: #0369A1;         --color-on-accent: #FFFFFF;
  --color-background: #F8FAFC;     --color-foreground: #020617;
  --color-card: #FFFFFF;           --color-card-foreground: #020617;
  --color-muted: #E8ECF1;          --color-muted-foreground: #475569;
  --color-border: #E2E8F0;         --color-border-strong: #0F172A;
  --color-destructive: #DC2626;    --color-ring: #0F172A;

  /* espaçamento (density 3 = espaçoso: 24–96) */
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px;

  /* motion */
  --dur-fast: 150ms; --dur-base: 250ms; --ease: cubic-bezier(.2,.7,.2,1);

  font-family: var(--font-jakarta), ui-sans-serif, system-ui, sans-serif;
  color: var(--color-foreground);
  background: var(--color-background);
  min-height: 100dvh;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.nu *, .nu *::before, .nu *::after { box-sizing: border-box; }
.nu :focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; }
.nu a, .nu button { cursor: pointer; touch-action: manipulation; }
.nu img, .nu video { display: block; max-width: 100%; height: auto; }
.nu h1, .nu h2, .nu h3, .nu p { margin: 0; }

/* skip link */
.nu-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 12px 16px; background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.nu-skip:focus { left: 8px; }

/* layout */
.nu-wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }
.nu-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
@media (max-width: 1023px) { .nu-grid { grid-template-columns: 1fr; } }

/* tipografia */
.nu-kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted-foreground); }
.nu-h1 { font-size: clamp(2.5rem, 1.4rem + 5vw, 5rem); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; margin-top: var(--space-2); }
.nu-h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.nu-lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.5; color: var(--color-secondary); max-width: 62ch; margin-top: var(--space-2); }

/* botões: 44px+ de alvo, um primário por tela */
.nu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px; border: 2px solid var(--color-border-strong); border-radius: 0;
  font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; line-height: 1;
  background: var(--color-card); color: var(--color-foreground);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.nu-btn:hover { box-shadow: 4px 4px 0 var(--color-border-strong); transform: translate(-2px, -2px); }
.nu-btn:active { transform: none; box-shadow: none; }
.nu-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.nu-btn--primary:hover { box-shadow: 4px 4px 0 var(--color-primary); }
.nu-btn--ghost { background: transparent; }
.nu-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.nu-btn--block { width: 100%; }

/* nav */
.nu-nav { position: sticky; top: 0; z-index: 50; background: var(--color-background); border-bottom: 2px solid var(--color-border-strong); }
.nu-nav__row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--space-3); }
.nu-nav__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--color-foreground); text-decoration: none; min-height: 44px; }
.nu-nav__links { display: flex; align-items: center; gap: var(--space-3); }
.nu-nav__links > a:not(.nu-btn) { color: var(--color-secondary); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
.nu-nav__links > a:not(.nu-btn):hover { color: var(--color-foreground); border-bottom-color: var(--color-border-strong); }
.nu-nav__toggle { display: none; width: 44px; height: 44px; border: 2px solid var(--color-border-strong); background: var(--color-card); color: var(--color-foreground); align-items: center; justify-content: center; }
@media (max-width: 767px) {
  .nu-nav__toggle { display: inline-flex; }
  .nu-nav__links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-background); border-bottom: 2px solid var(--color-border-strong); padding: var(--space-2); }
  .nu-nav__links.is-open { display: flex; }
  .nu-nav__links > a:not(.nu-btn) { padding: 12px 8px; border-bottom: 1px solid var(--color-border); }
  .nu-nav__cta { margin-top: var(--space-2); }
}

/* hero */
.nu-hero { padding-block: var(--space-6) var(--space-7); border-bottom: 2px solid var(--color-border-strong); }
.nu-hero__copy { grid-column: span 7; }
.nu-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.nu-hero__cred { grid-column: 9 / span 4; display: grid; border: 2px solid var(--color-border-strong); background: var(--color-card); }
.nu-cell { display: grid; gap: 6px; padding: var(--space-3); border-bottom: 2px solid var(--color-border-strong); }
.nu-cell:last-child { border-bottom: 0; }
.nu-cell svg { width: 26px; height: 26px; color: var(--color-accent); margin-bottom: 4px; }
.nu-cell strong { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.nu-cell span { font-size: 14.5px; color: var(--color-muted-foreground); line-height: 1.45; }
@media (max-width: 1023px) { .nu-hero__copy, .nu-hero__cred { grid-column: auto; } .nu-hero__cred { margin-top: var(--space-4); } }

/* prova */
.nu-proof { padding-block: var(--space-6); border-bottom: 2px solid var(--color-border-strong); }
.nu-logos { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--color-border-strong); }
.nu-logos__item { display: grid; place-items: center; min-height: 96px; padding: var(--space-2); background: var(--color-card); border-right: 2px solid var(--color-border-strong); border-bottom: 2px solid var(--color-border-strong); }
.nu-logos__item:nth-child(4n) { border-right: 0; }
.nu-logos__item:nth-last-child(-n+4) { border-bottom: 0; }
.nu-logos__item img { max-height: 40px; width: auto; max-width: 70%; -o-object-fit: contain; object-fit: contain; filter: grayscale(1) contrast(1.1); }
.nu-logos__item:hover img { filter: none; }
@media (max-width: 767px) { .nu-logos { grid-template-columns: repeat(2, 1fr); } .nu-logos__item:nth-child(4n) { border-right: 2px solid var(--color-border-strong); } .nu-logos__item:nth-child(2n) { border-right: 0; } .nu-logos__item:nth-last-child(-n+4) { border-bottom: 2px solid var(--color-border-strong); } .nu-logos__item:nth-last-child(-n+2) { border-bottom: 0; } }
.nu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-4) 0 0; }
.nu-stats__item { border-left: 4px solid var(--color-accent); padding-left: var(--space-2); }
.nu-stats dt { font-size: 14px; font-weight: 600; color: var(--color-muted-foreground); }
.nu-stats dd { margin: 4px 0 0; font-size: clamp(2.5rem, 2rem + 2vw, 4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .nu-stats { grid-template-columns: 1fr; } }

/* demo */
.nu-demo { padding-block: var(--space-6); border-bottom: 2px solid var(--color-border-strong); background: var(--color-primary); color: var(--color-on-primary); }
.nu-demo .nu-lead { color: #CBD5E1; }
.nu-demo__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-4); align-items: start; }
@media (max-width: 1023px) { .nu-demo__grid { grid-template-columns: 1fr; } }
.nu-player { margin: 0; }
.nu-player__frame { position: relative; border: 2px solid #FFFFFF; background: #000; }
.nu-player video { width: 100%; aspect-ratio: 1280 / 624; -o-object-fit: contain; object-fit: contain; background: #000; }
.nu-demo__grid > .nu-player:last-child video { aspect-ratio: 392 / 850; max-height: 560px; margin-inline: auto; }
.nu-player__btn {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
  background: var(--color-card); color: var(--color-foreground); border: 2px solid var(--color-border-strong);
  font: inherit; font-weight: 700; font-size: 15px;
  transition: opacity var(--dur-base) var(--ease);
}
.nu-player__btn.is-playing { opacity: 0; pointer-events: none; }
.nu-player__frame:hover .nu-player__btn.is-playing, .nu-player__btn.is-playing:focus-visible { opacity: 1; pointer-events: auto; }
.nu-player figcaption { margin-top: 10px; font-size: 14px; color: #CBD5E1; font-weight: 600; }

/* bento */
.nu-bento { padding-block: var(--space-6); border-bottom: 2px solid var(--color-border-strong); }
.nu-bento__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--space-4); border: 2px solid var(--color-border-strong); }
.nu-bento__cell { padding: var(--space-4); background: var(--color-card); border-right: 2px solid var(--color-border-strong); border-bottom: 2px solid var(--color-border-strong); display: grid; align-content: start; gap: 10px; }
.nu-bento__cell.is-wide { grid-column: span 2; }
.nu-bento__cell svg { width: 30px; height: 30px; color: var(--color-accent); }
.nu-bento__cell h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.nu-bento__cell p { color: var(--color-muted-foreground); font-size: 15.5px; line-height: 1.5; max-width: 52ch; }
.nu-bento__cell:nth-child(3n), .nu-bento__cell.is-wide:nth-child(3n+2) { border-right: 0; }
.nu-bento__cell:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 1023px) { .nu-bento__grid { grid-template-columns: 1fr 1fr; } .nu-bento__cell, .nu-bento__cell.is-wide { grid-column: auto; border-right: 2px solid var(--color-border-strong); border-bottom: 2px solid var(--color-border-strong); } .nu-bento__cell:nth-child(2n) { border-right: 0; } .nu-bento__cell:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 639px) { .nu-bento__grid { grid-template-columns: 1fr; } .nu-bento__cell { border-right: 0 !important; border-bottom: 2px solid var(--color-border-strong) !important; } .nu-bento__cell:last-child { border-bottom: 0 !important; } }

/* pricing */
.nu-pricing { padding-block: var(--space-6); border-bottom: 2px solid var(--color-border-strong); }
.nu-pricing__form { grid-column: span 7; }
.nu-pricing__total { grid-column: 9 / span 4; border: 2px solid var(--color-border-strong); background: var(--color-card); padding: var(--space-3); position: sticky; top: 88px; }
@media (max-width: 1023px) { .nu-pricing__form, .nu-pricing__total { grid-column: auto; } .nu-pricing__total { position: static; margin-top: var(--space-3); } }
.nu-field { margin-top: var(--space-3); }
.nu-field label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 16px; }
.nu-field label output { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800; }
.nu-field input[type="range"] { width: 100%; margin-top: 10px; accent-color: var(--color-accent); height: 44px; }
.nu-field input[type="email"] { width: 100%; margin-top: 8px; min-height: 48px; padding: 0 14px; border: 2px solid var(--color-border-strong); border-radius: 0; background: var(--color-card); color: var(--color-foreground); font: inherit; font-size: 16px; }
.nu-field input[aria-invalid="true"] { border-color: var(--color-destructive); }
.nu-field--check { display: grid; grid-template-columns: 24px 1fr; -moz-column-gap: 12px; column-gap: 12px; align-items: center; }
.nu-field--check input { width: 24px; height: 24px; accent-color: var(--color-accent); margin: 0; }
.nu-field--check label { display: flex; gap: 12px; justify-content: flex-start; min-height: 44px; align-items: center; }
.nu-field--check label span { color: var(--color-accent); }
.nu-field--check .nu-help { grid-column: 2; }
.nu-help { margin-top: 6px; font-size: 13.5px; color: var(--color-muted-foreground); line-height: 1.45; }
.nu-error { margin-top: 6px; font-size: 13.5px; color: var(--color-destructive); font-weight: 600; }
.nu-total { font-size: clamp(2.25rem, 2rem + 1.5vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; margin-top: 6px; }
.nu-breakdown { width: 100%; margin-top: var(--space-2); border-collapse: collapse; font-size: 14.5px; }
.nu-breakdown th { text-align: left; font-weight: 600; color: var(--color-muted-foreground); padding: 8px 0; border-top: 1px solid var(--color-border); }
.nu-breakdown td { text-align: right; padding: 8px 0; border-top: 1px solid var(--color-border); font-variant-numeric: tabular-nums; font-weight: 700; }
.nu-pricing__total .nu-btn { margin-top: var(--space-2); }

/* contato */
.nu-contact { padding-block: var(--space-7); border-bottom: 2px solid var(--color-border-strong); }
.nu-contact > .nu-grid > div:first-child { grid-column: span 6; }
.nu-form { grid-column: 8 / span 5; display: grid; gap: var(--space-2); border: 2px solid var(--color-border-strong); background: var(--color-card); padding: var(--space-3); }
.nu-form .nu-field { margin-top: 0; }
@media (max-width: 1023px) { .nu-contact > .nu-grid > div:first-child, .nu-form { grid-column: auto; } .nu-form { margin-top: var(--space-3); } }

/* footer */
.nu-footer { padding-block: var(--space-4); }
.nu-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: 14px; color: var(--color-muted-foreground); }
.nu-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nu-footer nav a { color: var(--color-secondary); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nu-footer nav a:hover { color: var(--color-foreground); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .nu *, .nu *::before, .nu *::after { transition-duration: 0ms !important; animation: none !important; }
  .nu-btn:hover { transform: none; }
}

/* Pré-entrega da skill: alvo mínimo 44×44. Os links do menu tinham 39–41px
   de largura; o checkbox de 24px ganha um alvo de 44px (a label, que já o
   aciona, também tem 44 de altura). */
.nu-nav__links > a:not(.nu-btn) { padding-inline: 8px; min-width: 44px; justify-content: center; }
.nu-field--check { grid-template-columns: 44px 1fr; -moz-column-gap: 8px; column-gap: 8px; }
.nu-field--check input { width: 28px; height: 28px; justify-self: center; }

/* Rodapé: os links "Prova/Demo/Preço" tinham 39–41px de largura. */
.nu-footer nav a { padding-inline: 8px; min-width: 44px; justify-content: center; }

/* Checkbox brutalista com alvo de 44×44: o input ocupa a área toda e a caixa
   de 24px é desenhada dentro. Sem depender só da label para o toque. */
.nu-field--check input {
  -moz-appearance: none;
       appearance: none; -webkit-appearance: none; width: 44px; height: 44px; margin: 0;
  position: relative; background: transparent; border: 0; cursor: pointer;
}
.nu-field--check input::before {
  content: ""; position: absolute; left: 10px; top: 10px; width: 24px; height: 24px;
  border: 2px solid var(--color-border-strong); background: var(--color-card);
}
.nu-field--check input:checked::before { background: var(--color-accent); border-color: var(--color-accent); }
.nu-field--check input:checked::after {
  content: ""; position: absolute; left: 18px; top: 13px; width: 7px; height: 13px;
  border: solid var(--color-on-accent); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.nu-field--check input:focus-visible { outline: 3px solid var(--color-ring); outline-offset: -4px; }

/* Hubsoft é branco puro (lum 255): invertido para aparecer no card claro. */
.nu-logos__item.is-light img { filter: invert(1) grayscale(1) contrast(1.1); }
.nu-logos__item.is-light:hover img { filter: invert(1); }

/* ═══════════════════════════════════════════════════════════════════════════
   TEMA ESCURO. Regra `color-dark-mode` da skill: variantes tonais, não a
   inversão. O acento vira o roxo da marca (#8B5CF6). Como #8B5CF6 com texto
   branco fica abaixo de 4.5:1, o texto SOBRE o acento é escuro no dark.
   Ativa por preferência do sistema (sem override) ou pelo botão da nav.
   ═══════════════════════════════════════════════════════════════════════════ */
.nu[data-theme="dark"],
.nu:not([data-theme="light"]):where([data-theme="dark"]) {
  --color-primary: #E2E8F0;        --color-on-primary: #0B0F19;
  --color-secondary: #CBD5E1;      --color-on-secondary: #0B0F19;
  --color-accent: #8B5CF6;         --color-on-accent: #0B0620;
  --color-background: #0B0F19;     --color-foreground: #F1F5F9;
  --color-card: #131826;           --color-card-foreground: #F1F5F9;
  --color-muted: #1E2535;          --color-muted-foreground: #A3ADBE;
  --color-border: #2A3244;         --color-border-strong: #E2E8F0;
  --color-destructive: #F87171;    --color-ring: #C4B5FD;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .nu:not([data-theme="light"]) {
    --color-primary: #E2E8F0;        --color-on-primary: #0B0F19;
    --color-secondary: #CBD5E1;      --color-on-secondary: #0B0F19;
    --color-accent: #8B5CF6;         --color-on-accent: #0B0620;
    --color-background: #0B0F19;     --color-foreground: #F1F5F9;
    --color-card: #131826;           --color-card-foreground: #F1F5F9;
    --color-muted: #1E2535;          --color-muted-foreground: #A3ADBE;
    --color-border: #2A3244;         --color-border-strong: #E2E8F0;
    --color-destructive: #F87171;    --color-ring: #C4B5FD;
    color-scheme: dark;
  }
}
/* a seção de demo era navy sólido no claro; no escuro vira o card */
.nu[data-theme="dark"] .nu-demo { background: var(--color-card); color: var(--color-foreground); }
.nu[data-theme="dark"] .nu-demo .nu-lead, .nu[data-theme="dark"] .nu-player figcaption { color: var(--color-secondary); }
.nu[data-theme="dark"] .nu-player__frame { border-color: var(--color-border-strong); }
.nu[data-theme="dark"] .nu-btn--primary:hover { box-shadow: 4px 4px 0 var(--color-border-strong); }
/* logos no escuro: claros (inverte os escuros, deixa o Hubsoft como está) */
.nu[data-theme="dark"] .nu-logos__item img { filter: invert(1) grayscale(1) contrast(1.1); }
.nu[data-theme="dark"] .nu-logos__item.is-light img { filter: grayscale(1); }
.nu[data-theme="dark"] .nu-logos__item:hover img { filter: invert(1); }
.nu[data-theme="dark"] .nu-logos__item.is-light:hover img { filter: none; }

/* botão de tema */
.nu-nav__theme { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-border-strong); background: var(--color-card); color: var(--color-foreground); margin-left: auto; }
.nu-nav__theme:hover { box-shadow: 3px 3px 0 var(--color-border-strong); }
@media (min-width: 768px) { .nu-nav__theme { margin-left: 0; } .nu-nav__row { gap: var(--space-2); } }

/* ═══════════════════════════════════════════════════════════════════════════
   CANAIS: grade 4 colunas; a célula-lead ocupa 2×2 (assimetria), os seis
   canais preenchem o resto. Bordas visíveis, sem raio, ícone no acento.
   ═══════════════════════════════════════════════════════════════════════════ */
.nu-channels { padding-block: var(--space-6); border-bottom: 2px solid var(--color-border-strong); }
.nu-channels__grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--color-border-strong); }
.nu-channels__lead { grid-column: span 2; grid-row: span 2; padding: var(--space-4); background: var(--color-primary); color: var(--color-on-primary); border-right: 2px solid var(--color-border-strong); display: grid; align-content: center; gap: 6px; }
.nu-channels__lead .nu-kicker, .nu-channels__lead .nu-lead { color: inherit; opacity: .85; }
.nu-channels__cell { padding: var(--space-3); background: var(--color-card); border-right: 2px solid var(--color-border-strong); border-bottom: 2px solid var(--color-border-strong); display: grid; align-content: start; gap: 8px; min-height: 180px; }
.nu-channels__cell svg { width: 28px; height: 28px; color: var(--color-accent); }
.nu-channels__cell h3 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.nu-channels__cell p { color: var(--color-muted-foreground); font-size: 14.5px; line-height: 1.45; }
/* linhas: [lead lead c1 c2] [lead lead c3 c4] [c5 c6 . .] → c5,c6 na 3ª linha ocupam 2 colunas cada */
.nu-channels__cell:nth-child(2), .nu-channels__cell:nth-child(4) { border-right: 2px solid var(--color-border-strong); }
.nu-channels__cell:nth-child(3), .nu-channels__cell:nth-child(5) { border-right: 0; }
.nu-channels__cell:nth-child(6), .nu-channels__cell:nth-child(7) { grid-column: span 2; border-bottom: 0; }
.nu-channels__cell:nth-child(7) { border-right: 0; }
.nu-channels__lead { border-bottom: 2px solid var(--color-border-strong); }
@media (max-width: 1023px) {
  .nu-channels__grid { grid-template-columns: 1fr 1fr; }
  .nu-channels__lead { grid-column: span 2; grid-row: auto; border-right: 0; }
  .nu-channels__cell, .nu-channels__cell:nth-child(6), .nu-channels__cell:nth-child(7) { grid-column: auto; border-right: 2px solid var(--color-border-strong); border-bottom: 2px solid var(--color-border-strong); min-height: 0; }
  .nu-channels__cell:nth-child(2n+1) { border-right: 0; }
  .nu-channels__cell:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 639px) {
  .nu-channels__grid { grid-template-columns: 1fr; }
  .nu-channels__cell { border-right: 0 !important; border-bottom: 2px solid var(--color-border-strong) !important; }
  .nu-channels__cell:last-child { border-bottom: 0 !important; }
}

/* Ícones no escuro: #8B5CF6 sobre o card dava 4.18:1 (passa como gráfico,
   3:1), mas um tom acima (#A78BFA) dá folga sem mudar o acento dos botões. */
.nu[data-theme="dark"] .nu-cell svg,
.nu[data-theme="dark"] .nu-channels__cell svg,
.nu[data-theme="dark"] .nu-bento__cell svg,
.nu[data-theme="dark"] .nu-stats__item { color: #A78BFA; border-color: #A78BFA; }
.nu[data-theme="dark"] .nu-field--check label span { color: #A78BFA; }

/* ═══════════════════════════════════════════════════════════════════════════
   Texto BRANCO nos botões roxos do escuro. Fica em ~3.4:1 com #8B5CF6, então
   o botão ganha borda clara de 2px e sombra dura para o alvo ler pelo
   contorno, e o texto sobe para 17px/800 (limite de "texto grande" bold da
   WCAG é 18.66px; 17px/800 com 52px de altura é legível de sobra).
   ═══════════════════════════════════════════════════════════════════════════ */
.nu[data-theme="dark"] { --color-on-accent: #FFFFFF; }
.nu[data-theme="dark"] .nu-btn--primary { border-color: var(--color-border-strong); font-weight: 800; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.nu[data-theme="dark"] .nu-btn--primary.nu-btn--lg { font-size: 17px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGOS DAS INTEGRAÇÕES: cores ORIGINAIS, sem grayscale/invert em nenhum
   tema. Cada logo fica numa placa branca (a cor de marca deles foi feita para
   fundo claro); no escuro a placa continua branca dentro do card, e o Hubsoft
   (logo branco) ganha placa escura.
   ═══════════════════════════════════════════════════════════════════════════ */
.nu-logos__item img,
.nu-logos__item:hover img,
.nu-logos__item.is-light img,
.nu-logos__item.is-light:hover img,
.nu[data-theme="dark"] .nu-logos__item img,
.nu[data-theme="dark"] .nu-logos__item:hover img,
.nu[data-theme="dark"] .nu-logos__item.is-light img,
.nu[data-theme="dark"] .nu-logos__item.is-light:hover img { filter: none; }
.nu-logos__item { background: #FFFFFF; }
.nu-logos__item.is-light { background: #0F172A; }
.nu[data-theme="dark"] .nu-logos__item { background: #FFFFFF; }
.nu[data-theme="dark"] .nu-logos__item.is-light { background: #0F172A; }

/* ═══════════════════════════════════════════════════════════════════════════
   ESCALA TIPOGRÁFICA UM DEGRAU ABAIXO. O brutalismo continua com peso alto,
   mas 800 em tudo estava pesado demais: títulos vão para 700, textos de
   apoio para 400/500. Tamanhos caem ~20% no topo da escala. A hierarquia
   (h1 > h2 > h3 > corpo) é preservada, só comprimida.
   ═══════════════════════════════════════════════════════════════════════════ */
.nu-h1 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  line-height: 1.06; font-weight: 700; letter-spacing: -.028em;
}
.nu-h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  line-height: 1.12; font-weight: 700; letter-spacing: -.022em;
}
.nu-lead {
  font-size: clamp(1rem, .97rem + .15vw, 1.0625rem);
  line-height: 1.55; font-weight: 400;
}
.nu-kicker { font-size: 12px; font-weight: 600; letter-spacing: .09em; }

/* blocos internos */
.nu-cell strong { font-size: 15.5px; font-weight: 700; }
.nu-cell span { font-size: 13.75px; }
.nu-channels__cell h3 { font-size: 16.5px; font-weight: 700; }
.nu-channels__cell p { font-size: 13.75px; }
.nu-bento__cell h3 { font-size: 18px; font-weight: 700; }
.nu-bento__cell p { font-size: 14.5px; }

/* números: seguem grandes (é a prova), mas sem o 800 */
.nu-stats dd { font-size: clamp(2rem, 1.7rem + 1.4vw, 3rem); font-weight: 700; }
.nu-stats dt { font-size: 13px; font-weight: 500; }
.nu-total { font-size: clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem); font-weight: 700; }
.nu-field label { font-size: 15px; font-weight: 600; }
.nu-field label output { font-size: 18px; font-weight: 700; }
.nu-breakdown { font-size: 13.75px; }
.nu-breakdown th { font-weight: 500; }
.nu-breakdown td { font-weight: 600; }

/* navegação, botões e rodapé */
.nu-nav__brand { font-size: 16px; font-weight: 700; }
.nu-nav__links > a:not(.nu-btn) { font-weight: 500; font-size: 14.5px; }
.nu-btn { font-size: 14px; font-weight: 600; }
.nu-btn--lg { font-size: 15px; }
.nu[data-theme="dark"] .nu-btn--primary { font-weight: 700; }
.nu[data-theme="dark"] .nu-btn--primary.nu-btn--lg { font-size: 15.5px; }
.nu-player__btn { font-size: 14px; font-weight: 600; }
.nu-player figcaption { font-size: 13.25px; font-weight: 500; }
.nu-help { font-size: 13px; }
.nu-footer__row { font-size: 13.25px; }
.nu-footer nav a { font-weight: 500; font-size: 13.75px; }
.nu-skip { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   FONTE: Inter, com a pilha de sistema como fallback.
   ═══════════════════════════════════════════════════════════════════════════ */
.nu {
  font-family: var(--font-inter), "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RITMO DO BLOCO DO HERO. Antes: kicker colado no h1 e lead colado no h1,
   com o título em line-height 1.06 (apertado para 2-3 linhas). Agora cada
   parte tem respiro proporcional ao seu tamanho, e o texto ganha uma medida
   de leitura mais curta (a regra line-length pede 60-75 caracteres).
   ═══════════════════════════════════════════════════════════════════════════ */
.nu-hero__copy .nu-kicker { display: block; margin-bottom: var(--space-2); }
.nu-hero__copy .nu-h1 {
  margin-top: 0;
  line-height: 1.12;          /* era 1.06: respira entre as linhas do título */
  letter-spacing: -.024em;
  max-width: 16ch;            /* quebra em 3 linhas curtas, não 2 largas */
}
.nu-hero__copy .nu-lead {
  margin-top: var(--space-3); /* era space-2 */
  max-width: 54ch;            /* ~62 caracteres por linha */
  line-height: 1.6;
}
@media (max-width: 767px) {
  .nu-hero__copy .nu-h1 { max-width: none; line-height: 1.15; }
  .nu-hero__copy .nu-lead { max-width: none; }
}

/* O play agora é um só, no cabeçalho da seção: os dois vídeos rodam juntos.
   O botão sobreposto ao quadro saiu (cada vídeo mantém o `controls` nativo). */
.nu-player__btn { display: none; }
.nu-demo__play { margin-top: var(--space-3); }
.nu[data-theme="dark"] .nu-demo__play { border-color: var(--color-border-strong); }

/* ═══════════════════════════════════════════════════════════════════════════
   /new v2 — arquitetura da home do concorrente, estética OmnieTalk.
   Linguagem visual deles: pílulas 9999px, cards 24px, sombras suaves, muito
   branco, uma cor de acento só nos CTAs. Aqui com os nossos tokens (claro
   #0369A1, escuro #8B5CF6) e Inter. Prefixo `o-`.
   ═══════════════════════════════════════════════════════════════════════════ */
.nu { --o-radius: 24px; --o-shadow: 0 20px 60px -30px rgba(2,6,23,.35); --o-ease: cubic-bezier(.2,.7,.2,1); }
.nu[data-theme="dark"] { --o-shadow: 0 20px 60px -30px rgba(0,0,0,.8); }

/* tipografia (deles: h1 76px/500; a nossa escala menor, como você pediu) */
.o-h1 { font-size: clamp(2.125rem, 1.3rem + 3.6vw, 3.75rem); line-height: 1.06; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.o-h1 em, .o-h2 em { font-style: normal; color: var(--color-accent); }
.nu[data-theme="dark"] .o-h1 em, .nu[data-theme="dark"] .o-h2 em { color: #A78BFA; }
.o-h2 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.o-h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.o-lead { font-size: clamp(1rem, .97rem + .2vw, 1.125rem); line-height: 1.6; color: var(--color-muted-foreground); max-width: 56ch; margin-top: var(--space-2); }
.o-center { text-align: center; margin-inline: auto; }
.o-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 10px; }
.o-list li { position: relative; padding-left: 18px; font-size: 15px; color: var(--color-foreground); }
.o-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.o-link { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-3); min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--color-foreground); text-decoration: none; }
.o-link:hover { color: var(--color-accent); }

/* botões em pílula (deles: 9999px, 44px, laranja) */
.o-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 9999px; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; border: 2px solid transparent; transition: transform var(--dur-fast) var(--o-ease), box-shadow var(--dur-fast) var(--o-ease), background-color var(--dur-fast) var(--o-ease); }
.o-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(2,6,23,.45); }
.o-btn--primary { background: var(--color-accent); color: #fff; }
.o-btn--ghost { background: transparent; color: var(--color-foreground); border-color: var(--color-border-strong); }
.o-btn--light { background: #fff; color: #0F172A; }
.o-btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.o-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.nu[data-theme="dark"] .o-btn--primary { border-color: var(--color-border-strong); }
.o-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 9999px; border: 1px solid var(--color-border); background: var(--color-card); font-size: 13px; font-weight: 600; color: var(--color-secondary); box-shadow: var(--o-shadow); }
.o-pill__dot { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #6D5DFC, #16A34A); }
.o-hex { width: 40px; height: 40px; display: inline-grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; background: #0F172A; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.o-hex--light { background: #fff; color: #0F172A; }

/* nav: as pílulas do nosso nav brutalista viram pílulas suaves */
.nu-nav { border-bottom: 1px solid var(--color-border); }
.nu-nav .nu-btn, .nu-nav__theme, .nu-nav__toggle { border-radius: 9999px; }
.nu-nav .nu-btn--primary { border-color: var(--color-accent); }

/* ── HERO ─────────────────────────────────────────────────────────────── */
.o-hero { position: relative; padding: var(--space-6) 0 var(--space-7); overflow: hidden; border-bottom: 0; }
.o-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-5); align-items: center; }
.o-hero__copy .o-h1 { margin-top: var(--space-3); }
.o-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); }
.o-hero__note { margin-top: var(--space-3); font-size: 14px; color: var(--color-muted-foreground); max-width: 48ch; }
.o-hero__art { position: relative; min-height: 520px; display: grid; place-items: center; }
.o-hero__ribbon { position: absolute; inset: -10% -20%; background: url("/generated/bg-s1.webp") center / cover no-repeat; opacity: .9; border-radius: 40%; filter: blur(2px); mix-blend-mode: normal; }
.nu:not([data-theme="dark"]) .o-hero__ribbon { opacity: .75; mix-blend-mode: multiply; }
.o-hero__phone { position: relative; width: min(300px, 70%); filter: drop-shadow(0 30px 40px rgba(2,6,23,.35)); }
.o-hero__phone > img { width: 100%; height: auto; display: block; }
.o-hero__screen { position: absolute; left: 21.637%; top: 5.953%; width: 55.409%; height: 84.816%; overflow: hidden; border-radius: 22px; background: #000; }
.o-hero__screen img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.o-float { position: absolute; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--color-card); color: var(--color-accent); box-shadow: var(--o-shadow); border: 1px solid var(--color-border); animation: o-float 6s ease-in-out infinite; }
.o-float--a { left: 6%; top: 18%; animation-delay: 0s; color: #25D366; }
.o-float--b { right: 8%; top: 10%; animation-delay: -1.2s; color: #E1306C; }
.o-float--c { left: 2%; bottom: 26%; animation-delay: -2.4s; color: #0084FF; }
.o-float--d { right: 4%; bottom: 34%; animation-delay: -3.6s; color: #F59E0B; }
.o-float--e { right: 16%; bottom: 6%; animation-delay: -4.8s; color: #34D399; }
@keyframes o-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.o-hero__scroll { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-border); color: var(--color-muted-foreground); background: var(--color-card); animation: o-bounce 1.6s infinite; }
@keyframes o-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (max-width: 1023px) { .o-hero__grid { grid-template-columns: 1fr; } .o-hero__art { min-height: 440px; } }

/* ── FAIXA DE MARCAS (esteira) ────────────────────────────────────────── */
.o-band { padding: var(--space-4) 0; background: var(--color-primary); color: var(--color-on-primary); overflow: hidden; }
.o-band__label { margin: 0 0 var(--space-2); text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.o-band__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.o-band__track { display: flex; gap: 16px; width: -moz-max-content; width: max-content; margin: 0; padding: 0; list-style: none; animation: o-marquee 40s linear infinite; }
.o-band__viewport:hover .o-band__track, .o-band__viewport:focus-within .o-band__track, .o-band__viewport:focus .o-band__track { animation-play-state: paused; }
.o-band__item { flex: 0 0 auto; width: 180px; height: 72px; display: grid; place-items: center; border-radius: 16px; background: #fff; }
.o-band__item.is-dark { background: #0F172A; }
.o-band__item img { max-width: 64%; max-height: 40px; width: auto; height: auto; -o-object-fit: contain; object-fit: contain; }
@keyframes o-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .o-band__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .o-band__item[aria-hidden="true"] { display: none; } }

/* ── IA AO VIVO ───────────────────────────────────────────────────────── */
.o-ia { padding: var(--space-7) 0; }
.o-ia__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.o-ia__copy .o-btn { margin-top: var(--space-4); }
@media (max-width: 1023px) { .o-ia__grid { grid-template-columns: 1fr; gap: var(--space-4); } }
.o-live { display: grid; gap: 14px; justify-items: center; }
.o-live__phone { width: min(100%, 420px); aspect-ratio: 10 / 13; border-radius: 34px; padding: 18px; display: grid; grid-template-rows: auto 1fr; gap: 12px;
  background: linear-gradient(160deg, #7C3AED 0%, #4C1D95 100%); box-shadow: 0 40px 80px -30px rgba(76,29,149,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.o-live__bar { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13.5px; font-weight: 600; padding: 4px 4px 0; }
.o-live__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.o-live__status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; opacity: .9; }
.o-live__status span { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }
.o-live__list { list-style: none; margin: 0; padding: 4px 2px; overflow: hidden auto; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.o-live__msg { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; animation: o-msg .28s var(--o-ease) both; }
.o-live__msg--cliente { align-self: flex-end; }
.o-live__msg--ia { align-self: flex-start; }
.o-live__spark { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #111827; color: #C4B5FD; }
.o-live__bubble { padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.45; box-shadow: 0 6px 18px -10px rgba(0,0,0,.5); }
.o-live__msg--cliente .o-live__bubble { background: #fff; color: #0F172A; border-bottom-right-radius: 6px; }
.o-live__msg--ia .o-live__bubble { background: #111827; color: #F1F5F9; border-bottom-left-radius: 6px; }
.o-live__msg.is-typing .o-live__bubble { display: inline-flex; gap: 5px; padding: 12px 14px; }
.o-live__msg.is-typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; animation: o-dot 1s infinite; }
.o-live__msg.is-typing i:nth-child(2) { animation-delay: .15s; } .o-live__msg.is-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes o-dot { 0%,80%,100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes o-msg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.o-live__controls { display: flex; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .o-live__msg { animation: none; } .o-live__msg.is-typing i { animation: none; } }

/* ── ACORDEÃO 01–04 (mecanismo do concorrente) ────────────────────────── */
.o-acc { display: flex; height: clamp(300px, 56vw, 574px); overflow: hidden; background: var(--color-card); }
.o-acc__cols { flex: 1; display: grid; height: 100%; transition: grid-template-columns .5s var(--o-ease); }
.o-acc__col { position: relative; overflow: hidden; cursor: pointer; background: var(--color-muted); transition: background .5s; box-shadow: rgba(0,0,0,.15) -4px 0 8px -4px inset; outline: none; }
.o-acc__col.is-open { background: var(--color-accent); }
.nu[data-theme="dark"] .o-acc__col.is-open { background: #6D28D9; }
.o-acc__col:focus-visible { box-shadow: inset 0 0 0 3px var(--color-ring); }
.o-acc__closed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 64px 0; pointer-events: none; opacity: 1; transition: opacity .25s; }
.o-acc__col.is-open .o-acc__closed { opacity: 0; }
.o-acc__vtitle { writing-mode: vertical-lr; transform: rotate(180deg); white-space: nowrap; font-size: 18px; font-weight: 500; color: var(--color-foreground); }
.o-acc__open { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(16px, 3vw, 56px); pointer-events: none; overflow: hidden; color: #fff; opacity: 0; transition: opacity .08s; }
.o-acc__col.is-open .o-acc__open { opacity: 1; transition: opacity .3s .25s; }
.o-acc__col.is-open::before { content: ""; position: absolute; inset: 0 0 50%; pointer-events: none; background-image: radial-gradient(circle, rgba(0,0,0,.18) 1.5px, transparent 1.5px); background-size: 18px 18px; }
.o-acc__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; color: rgba(255,255,255,.85); }
.o-acc__title { white-space: pre-line; font-size: clamp(1.25rem, 1rem + 1.6vw, 2.5rem); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; margin-bottom: 12px; }
.o-acc__text { font-size: 15px; color: rgba(255,255,255,.85); max-width: 30ch; margin-bottom: 20px; }
.o-acc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.o-acc__list li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.o-acc__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.7); }
.o-acc__panel { position: relative; width: 500px; flex: 0 0 auto; overflow: hidden; background: #0F172A; box-shadow: -8px 0 20px rgba(0,0,0,.15); }
.o-acc__img { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.o-acc__img.is-open { opacity: 1; z-index: 1; }
.o-acc__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: left top; object-position: left top; }
@media (min-width: 1280px) { .o-acc__panel { width: 520px; } }
@media (max-width: 1023px) { .o-acc__panel { display: none; } .o-acc__text, .o-acc__list { display: none; } .o-acc__closed { padding: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .o-acc__cols, .o-acc__col, .o-acc__closed, .o-acc__open, .o-acc__img { transition: none; } }

/* ── ABAS POR ÁREA ────────────────────────────────────────────────────── */
.o-tabs { padding: var(--space-7) 0; background: var(--color-muted); }
.o-tabs__bar { display: grid; grid-template-columns: repeat(4, 1fr); margin: var(--space-4) auto 0; max-width: 900px; border: 1.5px solid var(--color-accent); border-radius: 9999px; overflow: hidden; background: var(--color-card); }
.o-tabs__tab { min-height: 44px; border: 0; background: transparent; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--color-accent); cursor: pointer; transition: background-color .2s, color .2s; }
.o-tabs__tab + .o-tabs__tab { border-left: 1.5px solid var(--color-accent); }
.o-tabs__tab.is-active { background: var(--color-accent); color: #fff; }
.o-tabs__card { margin-top: var(--space-4); border-radius: var(--o-radius); background: var(--color-card); box-shadow: var(--o-shadow); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); overflow: hidden; min-height: 420px; }
.o-tabs__copy { padding: var(--space-5); }
.o-tabs__media { position: relative; background: var(--color-primary); }
.o-tabs__media img { position: absolute; inset: 24px 0 0 24px; width: calc(100% - 24px); height: calc(100% - 24px); -o-object-fit: cover; object-fit: cover; -o-object-position: left top; object-position: left top; border-top-left-radius: 16px; box-shadow: -10px 0 30px rgba(0,0,0,.25); animation: o-msg .35s var(--o-ease) both; }
@media (max-width: 1023px) { .o-tabs__card { grid-template-columns: 1fr; } .o-tabs__media { min-height: 280px; } }
@media (max-width: 767px) { .o-tabs__bar { grid-template-columns: repeat(2, 1fr); border-radius: 24px; } .o-tabs__tab:nth-child(3) { border-left: 0; } .o-tabs__tab:nth-child(n+3) { border-top: 1.5px solid var(--color-accent); } }

/* ── BENTO ────────────────────────────────────────────────────────────── */
.o-bento { padding: var(--space-7) 0; position: relative; overflow: hidden; }
.o-bento::before { content: ""; position: absolute; inset: 0; background: url("/generated/bg-s3.webp") center / 1344px 752px no-repeat; opacity: .6; pointer-events: none; }
.nu:not([data-theme="dark"]) .o-bento::before { opacity: .18; mix-blend-mode: multiply; }
.o-bento__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 14px; max-width: 900px; }
.o-bento__cell { border-radius: 22px; overflow: hidden; }
.o-bento__cell--primary { background: var(--color-primary); color: var(--color-on-primary); grid-column: span 1; }
.o-bento__cell--accent { background: var(--color-accent); color: #fff; }
.o-bento__cell--muted { background: var(--color-card); color: var(--color-foreground); border: 1px solid var(--color-border); }
.o-bento__cell--img { background: var(--img) var(--pos, left top) / cover no-repeat; }
.o-bento__cell--tall { grid-row: span 2; }
.o-bento__num { display: grid; align-content: center; padding: 18px; gap: 2px; }
.o-bento__num small { font-size: 12px; font-weight: 600; opacity: .85; }
.o-bento__num strong { font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.o-bento__num strong em { font-style: normal; font-size: .45em; }
.o-bento__num span { font-size: 13px; font-weight: 500; opacity: .9; }
.o-bento__cell--mark, .o-bento__cell--spark { display: grid; place-items: center; background: transparent; color: var(--color-accent); }
.o-bento__slogan { grid-column: span 2; display: grid; place-items: center; text-align: center; padding: 18px; font-size: 20px; line-height: 1.3; }
@media (max-width: 767px) { .o-bento__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; } .o-bento__cell--tall { grid-row: span 1; } .o-bento__slogan { grid-column: span 2; } }

/* ── PREÇO E MODELO (reaproveitam os componentes, só o enquadramento) ──── */
.nu-pricing { border-bottom: 0; }
.nu-pricing__form, .nu-pricing__total, .nu-form, .nu-hero__cred { border-radius: var(--o-radius); border-width: 1px; border-color: var(--color-border); box-shadow: var(--o-shadow); }
.nu-field input[type="email"], .nu-btn { border-radius: 9999px; }
.o-model { padding: var(--space-7) 0; }
.o-model .o-lead { margin-bottom: var(--space-5); }
.o-model .bizm__card { border-radius: var(--o-radius); }

/* ── CTA FINAL ─────────────────────────────────────────────────────────── */
.o-cta { background: linear-gradient(135deg, var(--color-accent) 0%, #1e3a8a 100%); color: #fff; overflow: hidden; }
.nu[data-theme="dark"] .o-cta { background: linear-gradient(135deg, #7C3AED 0%, #312E81 100%); }
.o-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-5); min-height: 460px; }
.o-cta__h { color: #fff; }
.o-cta__lead { color: rgba(255,255,255,.85); margin-bottom: var(--space-4); }
.o-cta__media { position: relative; height: 100%; min-height: 320px; }
.o-cta__media img { position: absolute; left: 0; top: 60px; width: 120%; max-width: none; height: auto; border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
@media (max-width: 1023px) { .o-cta__grid { grid-template-columns: 1fr; padding-top: var(--space-6); } .o-cta__media { min-height: 220px; } .o-cta__media img { width: 100%; top: 0; } }
.nu-footer { border-top: 1px solid var(--color-border); }

/* Fita do hero: no CLARO a imagem escura virava um blob preto atrás do
   celular. No claro vira um degradê lavanda/verde suave (a fita deles é
   clara); a imagem de luz fica só no escuro. */
.nu:not([data-theme="dark"]) .o-hero__ribbon {
  background: radial-gradient(60% 70% at 40% 45%, rgba(139,92,246,.35), transparent 70%),
              radial-gradient(45% 55% at 75% 60%, rgba(34,197,94,.22), transparent 70%),
              radial-gradient(40% 50% at 25% 75%, rgba(99,102,241,.25), transparent 70%);
  mix-blend-mode: normal; opacity: 1; filter: blur(18px); border-radius: 50%; inset: 4% 0;
}
.nu[data-theme="dark"] .o-hero__ribbon { filter: blur(0); opacity: .95; border-radius: 0; inset: -20% -30%; background-size: cover; }

/* Fita no escuro contida na coluna da arte: com inset -30% ela entrava por
   trás do título e roubava legibilidade. */
.nu[data-theme="dark"] .o-hero__ribbon { inset: -16% -8% -16% 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO v3: fundo LIMPO atrás do celular (sem a fita), só um brilho radial nas
   cores da marca; vídeo real na tela; ícones de marca com a cor de cada canal.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-hero__ribbon { display: none; }
.o-hero__glow { position: absolute; inset: 6% 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(139,92,246,.28), rgba(139,92,246,.10) 55%, transparent 75%); filter: blur(10px); }
.nu[data-theme="dark"] .o-hero__glow { background: radial-gradient(closest-side, rgba(139,92,246,.45), rgba(139,92,246,.14) 55%, transparent 75%); }
.o-hero__screen video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; background: #000; }
.o-float svg { width: 24px; height: 24px; }
.o-float--b { color: #E1306C; } .o-float--c { color: #0084FF; }
@media (prefers-reduced-motion: reduce) { .o-hero__screen video { display: none; } .o-hero__screen { background: url("/video/demo-whatsapp-poster.jpg") center / cover; } }

/* Abas e CTA agora com FOTO: enquadramento de retrato, não de tela. */
.o-tabs__media { background: var(--color-muted); }
.o-tabs__media img { inset: 0; width: 100%; height: 100%; -o-object-position: center; object-position: center; border-radius: 0; box-shadow: none; }
.o-cta__media img { top: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; border-radius: 24px 0 0 24px; box-shadow: none; }
.o-cta__grid { gap: 0; }
.o-cta__grid > div:first-child { padding: var(--space-6) var(--space-5) var(--space-6) 0; }
@media (max-width: 1023px) { .o-cta__media img { border-radius: 24px; position: relative; height: auto; } }

/* ═══════════════════════════════════════════════════════════════════════════
   TELAS DO PRODUTO COM VARIANTE POR TEMA. Cada imagem existe em escuro e
   claro; o tema (data-theme no .nu) escolhe qual aparece. No acordeão são
   dois <img> empilhados; no bento é a variável --img / --img-light.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-acc__img img.o-img--light { display: none; }
.nu:not([data-theme="dark"]) .o-acc__img img.o-img--dark { display: none; }
.nu:not([data-theme="dark"]) .o-acc__img img.o-img--light { display: block; }
.nu:not([data-theme="dark"]) .o-acc__panel { background: #F8FAFC; }
.nu:not([data-theme="dark"]) .o-bento__cell--img { background-image: var(--img-light, var(--img)); }

/* ═══════════════════════════════════════════════════════════════════════════
   MARQUEE (spell.sh): o componente cuida do movimento e do fade; aqui só o
   espaçamento dos itens e a parada com prefers-reduced-motion, que ele não
   trata sozinho.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-band__marquee .o-band__item { margin-inline: 8px; }
.o-band__viewport, .o-band__track { display: none; }
@media (prefers-reduced-motion: reduce) { .o-band .marquee-scroller { animation: none !important; flex-wrap: wrap; justify-content: center; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ACORDEÃO: a tela aparece POR COMPLETO. O painel cresce para 56% da largura
   e a imagem usa `contain` (nada cortado), centralizada sobre o fundo da
   tela; a altura da seção sobe para caber uma tela 16:9 inteira.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-acc { height: clamp(320px, 46vw, 660px); }
.o-acc__panel { width: 56%; background: #0B0F19; }
.nu:not([data-theme="dark"]) .o-acc__panel { background: #EEF2F7; }
.o-acc__img { display: grid; place-items: center; padding: 18px; }
.o-acc__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; border-radius: 10px; box-shadow: 0 20px 50px -30px rgba(0,0,0,.6); }
@media (min-width: 1280px) { .o-acc__panel { width: 58%; } }
@media (max-width: 1023px) { .o-acc__panel { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ABAS: a tela do produto no card, inteira, com variante por tema.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-tabs__media { background: #0B0F19; display: grid; place-items: center; padding: 22px; }
.nu:not([data-theme="dark"]) .o-tabs__media { background: #EEF2F7; }
.o-tabs__media img { position: static; width: 100%; height: auto; max-height: 100%; -o-object-fit: contain; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 50px -30px rgba(0,0,0,.6); }
.o-tabs__media img.o-img--light { display: none; }
.nu:not([data-theme="dark"]) .o-tabs__media img.o-img--dark { display: none; }
.nu:not([data-theme="dark"]) .o-tabs__media img.o-img--light { display: block; }
.o-tabs__card { min-height: 460px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BENTO: tile de disparos em massa e régua de cobrança no lugar do slogan.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-bento__campaign { display: grid; align-content: center; gap: 8px; text-align: left; padding: 22px; }
.o-bento__campaign strong { font-size: 18px; line-height: 1.25; letter-spacing: -.015em; }
.o-bento__campaign span { font-size: 13.5px; line-height: 1.45; opacity: .92; }

/* ═══════════════════════════════════════════════════════════════════════════
   PREÇO, refeito na linguagem da página: um card só, duas colunas, coluna do
   total tingida com o acento, sliders com trilho e polegar desenhados,
   telefonia como interruptor. Sem as bordas e caixas do layout anterior.
   ═══════════════════════════════════════════════════════════════════════════ */
.nu-pricing { padding: var(--space-7) 0; background: var(--color-muted); }
.nu-pricing > .nu-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr); gap: 0; border-radius: var(--o-radius); overflow: hidden; background: var(--color-card); box-shadow: var(--o-shadow); border: 1px solid var(--color-border); }
.nu-pricing__form { grid-column: auto; padding: var(--space-5); border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.nu-pricing__form .nu-h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 600; letter-spacing: -.02em; }
.nu-pricing__form .nu-lead { margin-top: 8px; color: var(--color-muted-foreground); }
.nu-pricing__total { grid-column: auto; position: static; margin: 0; padding: var(--space-5); border: 0; border-left: 1px solid var(--color-border); border-radius: 0; box-shadow: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 10%, var(--color-card)), var(--color-card)); }
.nu-field { margin-top: var(--space-4); }
.nu-field label { font-size: 15px; font-weight: 600; }
.nu-field label output { font-size: 15px; font-weight: 600; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); padding: 4px 12px; border-radius: 9999px; }
.nu-field input[type="range"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 6px; margin-top: 14px; border-radius: 9999px; background: linear-gradient(90deg, var(--color-accent) var(--pct, 0%), var(--color-border) var(--pct, 0%)); }
.nu-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--color-accent); box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; }
.nu-field input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--color-accent); cursor: pointer; }
.nu-help { font-size: 13px; }
.nu-field--check { grid-template-columns: 48px 1fr; align-items: center; margin-top: var(--space-4); padding: 14px 16px; border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-background); }
.nu-field--check input { width: 44px; height: 26px; border-radius: 9999px; background: var(--color-border); position: relative; justify-self: start; transition: background-color .2s; }
.nu-field--check input::before { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.nu-field--check input:checked { background: var(--color-accent); }
.nu-field--check input:checked::before { transform: translateX(18px); background: #fff; border: 0; }
.nu-field--check input:checked::after { content: none; }
.nu-field--check label { min-height: 0; font-size: 15px; }
.nu-field--check .nu-help { margin-top: 2px; }
.nu-pricing .nu-kicker { color: var(--color-accent); }
.nu-total { font-size: clamp(2rem, 1.7rem + 1.4vw, 2.75rem); font-weight: 700; letter-spacing: -.03em; }
.nu-breakdown { margin-top: var(--space-3); }
.nu-breakdown th, .nu-breakdown td { border-top: 1px solid var(--color-border); padding: 10px 0; }
.nu-pricing__total .nu-btn { margin-top: var(--space-3); border-radius: 9999px; background: var(--color-accent); border-color: var(--color-accent); color: #fff; min-height: 48px; font-size: 15px; }
.nu-pricing__total .nu-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(2,6,23,.45); }
.nu[data-theme="dark"] .nu-pricing__total { background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 16%, var(--color-card)), var(--color-card)); }
@media (max-width: 980px) { .nu-pricing > .nu-grid { grid-template-columns: 1fr; } .nu-pricing__total { border-left: 0; border-top: 1px solid var(--color-border); } }

/* ═══════════════════════════════════════════════════════════════════════════
   TILE DE DISPAROS/RÉGUA: ocupa a largura toda do bento, duas linhas; texto
   à esquerda, ilustração (UI desenhada) à direita.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-bento__campaign { grid-column: 1 / -1; grid-row: span 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-3); padding: var(--space-4); overflow: visible; }
.o-bento__campaign-copy { display: grid; align-content: center; gap: 10px; }
.o-bento__campaign-copy strong { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.o-bento__campaign-copy span { font-size: 14.5px; line-height: 1.5; opacity: .92; }
@media (max-width: 767px) { .o-bento__campaign { grid-template-columns: 1fr; grid-row: span 3; } }

.o-camp { position: relative; min-height: 280px; }
.o-camp__blob { position: absolute; border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; filter: blur(2px); opacity: .9; }
.o-camp__blob--a { inset: -8% 30% 10% -6%; background: rgba(255,255,255,.16); transform: rotate(-8deg); }
.o-camp__blob--b { inset: 30% -8% -10% 40%; background: rgba(255,255,255,.12); transform: rotate(12deg); }
.o-camp__wizard, .o-camp__chat { position: absolute; border-radius: 16px; background: var(--color-card); color: var(--color-foreground); box-shadow: 0 24px 60px -24px rgba(2,6,23,.55); }
.o-camp__wizard { left: 0; top: 6%; width: 52%; padding: 16px 16px 14px; }
.o-camp__wtitle { font-size: 14px; font-weight: 700; color: var(--color-accent); }
.nu[data-theme="dark"] .o-camp__wtitle { color: #C4B5FD; }
.o-camp__wsub { font-size: 11px; color: var(--color-muted-foreground); margin-top: 2px; }
.o-camp__steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.o-camp__steps li { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--color-muted-foreground); }
.o-camp__steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; border: 1.5px solid var(--color-border); color: var(--color-muted-foreground); flex: 0 0 auto; }
.o-camp__steps li.is-done { color: var(--color-foreground); font-weight: 600; }
.o-camp__steps li.is-done span { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.o-camp__chat { right: 0; top: 18%; width: 54%; padding: 12px; display: grid; gap: 8px; }
.o-camp__day { text-align: center; font-size: 10px; color: var(--color-muted-foreground); }
.o-camp__bubble { position: relative; font-size: 11.5px; line-height: 1.4; padding: 8px 10px; border-radius: 12px; max-width: 92%; }
.o-camp__bubble--out { background: #111827; color: #F1F5F9; border-bottom-left-radius: 4px; }
.o-camp__bubble--in { background: var(--color-muted); color: var(--color-foreground); justify-self: end; border-bottom-right-radius: 4px; }
.o-camp__pix { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #16A34A; color: #fff; font-size: 9.5px; font-weight: 700; vertical-align: middle; }
.o-camp__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.o-camp__actions span { text-align: center; font-size: 10.5px; font-weight: 600; color: var(--color-accent); padding: 6px; border: 1px solid var(--color-border); border-radius: 8px; }
.o-camp__icon { position: absolute; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--color-card); color: var(--color-accent); box-shadow: 0 10px 24px -10px rgba(2,6,23,.5); animation: o-float 6s ease-in-out infinite; }
.o-camp__icon--a { left: 46%; top: -4%; } .o-camp__icon--b { right: -4%; top: 4%; animation-delay: -1.5s; }
.o-camp__icon--c { left: 40%; bottom: -2%; animation-delay: -3s; } .o-camp__icon--d { left: -3%; bottom: 8%; animation-delay: -4.5s; }
@media (prefers-reduced-motion: reduce) { .o-camp__icon { animation: none; } }

/* Abas de volta ao enquadramento de FOTO (as telas do produto agora estão
   dentro das fotos, no notebook/monitor de cada pessoa). */
.o-tabs__media { padding: 0; background: var(--color-muted); }
.o-tabs__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; border-radius: 0; box-shadow: none; }
.nu:not([data-theme="dark"]) .o-tabs__media { background: var(--color-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   FAIXA DE MARCAS no padrão da demo do spell.sh: sem fundo de faixa, sem
   placas; logos soltos a 70% sobre o fundo da página.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-band { background: transparent; color: var(--color-foreground); padding: var(--space-5) 0 var(--space-4); }
.o-band__label { color: var(--color-muted-foreground); opacity: 1; }
.o-band__logo { height: 44px; width: auto; max-width: 180px; }
.o-band__logo.is-light { filter: invert(1) brightness(.2); }           /* Hubsoft (branco) no claro */
.nu[data-theme="dark"] .o-band__logo.is-light { filter: none; }
.o-band__item { display: none; }

/* `.nu img { height: auto }` (0,1,1) vencia o `h-12` do Tailwind (0,1,0) e os
   logos renderizavam na altura natural (348px). Seletor mais específico. */
.nu img.o-band__logo { height: 44px; width: auto; max-width: 180px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BENTO enxuto: sem o fundo roxo (bg-s3) atrás, sem padding vertical, e a
   grade agora é só números + tile de campanha, em 3 colunas.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-bento::before { content: none; }
.o-bento { padding: 0; }
.o-bento__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; max-width: 900px; }
.o-bento__campaign { grid-column: 1 / -1; grid-row: span 2; }
@media (max-width: 767px) { .o-bento__grid { grid-template-columns: 1fr; grid-auto-rows: 130px; } .o-bento__campaign { grid-row: span 3; } }

/* sexto ícone do hero: widget no site (chat embutido) */
.o-float--f { left: 12%; bottom: 4%; animation-delay: -6s; color: #A78BFA; }

/* `content: none` sozinho não bastou: a regra original (`content: ""`) tem a
   mesma especificidade e a imagem seguia computada. Zera o fundo também. */
.o-bento::before { content: none; background: none; background-image: none; display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT AO VIVO: avatar da marca, card do PIX com QR real e bolha de arquivo.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-live__avatar, .o-live__spark { background: #fff; }
.o-live__card { display: grid; gap: 8px; justify-items: center; padding: 12px; background: #fff !important; color: #0F172A !important; width: min(100%, 210px); }
.o-live__cardtitle { font-size: 12.5px; font-weight: 700; }
.o-live__qr { display: block; width: 132px; height: 132px; padding: 6px; background: #fff; border-radius: 8px; border: 1px solid #E2E8F0; }
.o-live__qr svg { width: 100%; height: 100%; display: block; }
.o-live__cardhint { font-size: 10.5px; color: #475569; text-align: center; }
.o-live__cardbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #fff; background: #16A34A; padding: 7px 12px; border-radius: 9999px; }
.o-live__file { display: grid; grid-template-columns: 36px 1fr 24px; align-items: center; gap: 10px; padding: 10px 12px !important; background: #fff !important; color: #0F172A !important; min-width: 220px; }
.o-live__fileicon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #FEE2E2; color: #DC2626; }
.o-live__filemeta { display: grid; line-height: 1.25; min-width: 0; }
.o-live__filemeta strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-live__filemeta small { font-size: 10.5px; color: #64748B; }
.o-live__filedl { color: #64748B; }
.o-live__phone { aspect-ratio: 10 / 14; }

/* ═══════════════════════════════════════════════════════════════════════════
   BENTO no mesmo cinza das outras seções (não branco), com respiro próprio.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-bento { background: var(--color-muted); padding: var(--space-6) 0; }
.o-bento__cell--muted { background: var(--color-card); }

/* ═══════════════════════════════════════════════════════════════════════════
   MODELO DE NEGÓCIO: três passos numerados + rodapé com CTA.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.o-step { position: relative; padding: 26px; border-radius: var(--o-radius); background: var(--color-card); border: 1px solid var(--color-border); box-shadow: var(--o-shadow); transition: transform .25s var(--o-ease), box-shadow .25s var(--o-ease); }
.o-step:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(2,6,23,.45); }
.o-step__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.o-step__n { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--color-muted-foreground); }
.o-step__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--color-accent); }
.o-step__t { font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.o-step__d { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--color-muted-foreground); }
.o-step__list { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--color-border); display: grid; gap: 9px; }
.o-step__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.75px; line-height: 1.4; color: var(--color-foreground); }
.o-step__list li svg { flex: 0 0 auto; margin-top: 3px; color: #16A34A; }
.o-steps__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; padding: 22px 26px; border-radius: var(--o-radius); background: var(--color-primary); color: var(--color-on-primary); }
.o-steps__cta p { font-size: 15px; font-weight: 500; }
.nu[data-theme="dark"] .o-steps__cta { background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-foreground); }
@media (max-width: 980px) { .o-steps { grid-template-columns: 1fr; } }
/* remove qualquer resto do BusinessModel antigo, se ainda for referenciado */
.o-model .bizm { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO OFICIAL no header. O arquivo é a versão "ondark" (texto #F2F2F2), que
   some no tema claro: ali o texto é escurecido por filtro, preservando as
   duas bolhas coloridas (invert+hue-rotate devolveria cores erradas).
   ═══════════════════════════════════════════════════════════════════════════ */
.nu img[src$="omnietalk-logo-ondark.svg"] { height: 26px; width: auto; display: block; }
/* Nada de filtro: o filtro escurecia as bolhas junto com o texto. */
.nu .nu-nav__brand img { filter: none; }
.nu img.o-logo { height: 26px; width: auto; display: block; }
.nu .o-logo--light { display: none; }
.nu:not([data-theme="dark"]) .o-logo--dark { display: none; }
.nu:not([data-theme="dark"]) .o-logo--light { display: block; }
.nu-nav__brand { gap: 0; }

/* `.nu img.o-logo { display:block }` (0,2,1) vencia `.nu .o-logo--light
   { display:none }` (0,2,0) e as duas logos apareciam juntas no escuro.
   Regras de visibilidade com a mesma especificidade da regra base. */
.nu img.o-logo--light { display: none; }
.nu img.o-logo--dark { display: block; }
.nu:not([data-theme="dark"]) img.o-logo--dark { display: none; }
.nu:not([data-theme="dark"]) img.o-logo--light { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO NA PÍLULA (no lugar do ponto), entrando com blur. Maior que o ponto
   anterior: 30px de altura contra 22px.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-pill { padding: 6px 16px 6px 10px; gap: 10px; }
.o-pill__logo { display: inline-flex; align-items: center; }
.nu img.o-pill__logo > .o-logo, .o-pill__logo .o-logo { height: 30px; width: auto; display: block; }
.o-pill__logo .o-logo--light { display: none; }
.nu:not([data-theme="dark"]) .o-pill__logo .o-logo--dark { display: none; }
.nu:not([data-theme="dark"]) .o-pill__logo .o-logo--light { display: block; }
.o-pill__dot { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   CANAIS EM CARROSSEL (LogosCarousel do spell.sh) sobrepostos à arte do
   hero: dois por vez, alternando com stagger, em ordem embaralhada.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Os ícones voltam às posições fixas em volta do telefone; o que troca é o
   canal de cada posição, com o blur do spell.sh (logos-enter/exit). */
.o-float { display: grid; place-items: center; color: var(--c, var(--color-accent)); }
.o-float__in { display: grid; place-items: center; animation: o-swap 620ms ease both; animation-delay: inherit; }
@keyframes o-swap {
  0%   { transform: translateY(14px); filter: blur(4px); opacity: 0; }
  100% { transform: translateY(0);    filter: blur(0);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .o-float__in { animation: none; } }

/* `.nu img.o-logo { height: 26px }` (0,2,1) vencia a regra da pílula (0,2,0).
   Aqui a logo do hero é maior que a do header. */
.nu img.o-pill-logo-img, .o-pill__logo img.o-logo { height: 34px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPIRO NO HERO: lead, botões e a linha de prova estavam colados.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-hero__copy .o-lead { margin-top: var(--space-4); }
.o-hero__actions { margin-top: var(--space-5); }
.o-hero__note { margin-top: var(--space-4); }
.o-hero__copy .o-h1 { margin-top: var(--space-3); }
@media (max-width: 767px) {
  .o-hero__copy .o-lead { margin-top: var(--space-3); }
  .o-hero__actions { margin-top: var(--space-4); }
  .o-hero__note { margin-top: var(--space-3); }
}

/* `.nu p { margin: 0 }` (0,1,1) vencia `.o-hero__note` (0,1,0) e a nota
   colava nos botões. Seletor com a mesma especificidade. */
.nu p.o-hero__note { margin-top: var(--space-4); }
@media (max-width: 767px) { .nu p.o-hero__note { margin-top: var(--space-3); } }

/* Canais: blur FAST (0,3s em vez de 0,62s), trocando a cada 10s. */
.o-float__in { animation-duration: 300ms; }

/* A frase da pílula anima por caractere (BlurReveal), então precisa de um
   contexto inline próprio para não quebrar o alinhamento da pílula. */
.o-pill__text { display: inline-flex; flex-wrap: wrap; }

/* Respiro entre o título da faixa e a esteira de logos (a máscara de fade do
   marquee deixava o carrossel visualmente colado no texto acima dele).
   `.o-band__label` é um <p>, e `.nu h1, .nu h2, .nu h3, .nu p { margin:0 }`
   (dois seletores de classe) tem mais especificidade que uma classe só —
   por isso a margem não pegava. Repete o `.nu p` para igualar. */
.nu p.o-band__label { margin-bottom: var(--space-6); }
.o-band { padding-top: var(--space-6); }

/* O BlurReveal renderiza um `<span class="sr-only">` com o texto inteiro para
   leitor de tela, além dos caracteres animados. O utilitário `sr-only` do
   Tailwind não alcança este CSS escopado, então a cópia ficava VISÍVEL (a
   frase aparecia duplicada). Definido aqui, dentro do escopo .nu. */
.nu .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AGENTE PERSONALIZADO: lista de templates à esquerda (abas verticais), e à
   direita a mini-conversa do template escolhido + o que vem nele + o que ele
   liga por MCP. Cada template tem a própria cor (--c).
   ═══════════════════════════════════════════════════════════════════════════ */
.o-agents { padding: var(--space-7) 0; background: var(--color-background); }
.o-agents__head { text-align: center; max-width: 760px; margin: 0 auto var(--space-5); }
.o-kicker { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 12px; }
.nu[data-theme="dark"] .o-kicker { color: #A78BFA; }
.o-agents__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--space-4); align-items: start; }

.o-agents__list { display: grid; gap: 10px; }
.o-agents__tab {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; text-align: left;
  padding: 14px 16px; border-radius: 16px; cursor: pointer; font: inherit; color: var(--color-foreground);
  background: var(--color-card); border: 1px solid var(--color-border);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.o-agents__tab:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--c) 45%, var(--color-border)); }
.o-agents__tab.is-active { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent), var(--o-shadow); }
.o-agents__tabicon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--color-card)); }
.o-agents__tabtext { display: grid; gap: 2px; min-width: 0; }
.o-agents__tabtext strong { font-size: 15px; font-weight: 600; }
.o-agents__tabtext small { font-size: 13px; color: var(--color-muted-foreground); line-height: 1.4; }
.o-agents__more { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: var(--color-muted-foreground); background: var(--color-muted); }
.o-agents__more svg { flex: 0 0 auto; margin-top: 2px; color: var(--color-accent); }

.o-agents__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); border-radius: var(--o-radius); background: var(--color-card); border: 1px solid var(--color-border); box-shadow: var(--o-shadow); }
.o-agents__phone { border-radius: 22px; padding: 14px; min-height: 300px; display: grid; grid-template-rows: auto 1fr; gap: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 85%, #000) 0%, color-mix(in srgb, var(--c) 55%, #000) 100%); color: #fff; }
.o-agents__bar { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.o-agents__avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.o-agents__chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; align-content: start; }
.o-agents__msg { max-width: 88%; padding: 9px 12px; border-radius: 16px; font-size: 13.25px; line-height: 1.45; animation: o-msg .32s var(--o-ease) both; }
.o-agents__msg--cliente { align-self: flex-end; background: #fff; color: #0F172A; border-bottom-right-radius: 5px; }
.o-agents__msg--ia { align-self: flex-start; background: #111827; color: #F1F5F9; border-bottom-left-radius: 5px; }
.o-agents__meta { display: grid; align-content: start; gap: 10px; }
.o-agents__metatitle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted-foreground); margin-top: 4px; }
.o-agents__metatitle svg { color: var(--c); }
.o-agents__tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.o-agents__tools li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; }
.o-agents__tools svg { flex: 0 0 auto; margin-top: 3px; color: #16A34A; }
.o-agents__note { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 12.75px; line-height: 1.5; color: var(--color-muted-foreground); }

@media (max-width: 1023px) { .o-agents__grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .o-agents__panel { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .o-agents__msg { animation: none; } .o-agents__tab:hover { transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Seção de agentes um pouco maior e com mais respiro (pedido: "pode ficar um
   pouco maior"). O painel de casos de uso continua igual.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-agents { padding: calc(var(--space-7) + var(--space-3)) 0; }
.o-agents__grid { gap: var(--space-5); }
.o-agents__phone { min-height: 340px; }
.o-agents__panel { padding: var(--space-4); }
.o-agents__tab { padding: 16px 18px; }

/* ═══════════════════════════════════════════════════════════════════════════
   REDE MCP: agente no centro, MCP nativo à esquerda, os do cliente à direita,
   com fios em SVG e um pulso correndo em direção ao agente.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-mcp { margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--o-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 7%, var(--color-card)), var(--color-card));
  border: 1px solid var(--color-border); box-shadow: var(--o-shadow); }
.nu[data-theme="dark"] .o-mcp { background: linear-gradient(180deg, color-mix(in srgb, #8B5CF6 12%, var(--color-card)), var(--color-card)); }
.o-mcp__head { text-align: center; max-width: 560px; margin: 0 auto var(--space-4); }
.o-mcp__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px;
  font-size: 12.5px; font-weight: 600; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.nu[data-theme="dark"] .o-mcp__badge { color: #C4B5FD; background: rgba(139,92,246,.18); }
.o-mcp__title { margin-top: 12px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--color-foreground); }
.nu p.o-mcp__sub { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--color-muted-foreground); }

.o-mcp__net { display: grid; grid-template-columns: minmax(0,1fr) 200px minmax(0,1fr); gap: 0; align-items: center; }
.o-mcp__col { display: grid; gap: 10px; }
.nu p.o-mcp__coltitle { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted-foreground); margin-bottom: 4px; }
.o-mcp__coltitle em { font-style: normal; color: var(--color-accent); }
.nu[data-theme="dark"] .o-mcp__coltitle em { color: #A78BFA; }
.o-mcp__col--right { text-align: right; }
.o-mcp__col--right .o-mcp__node { grid-template-columns: 1fr 38px; }
.o-mcp__col--right .o-mcp__nodeicon { order: 2; }
.o-mcp__col--right .o-mcp__nodetext { order: 1; text-align: right; }

.o-mcp__node { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center;
  padding: 11px 14px; border-radius: 14px; background: var(--color-card);
  border: 1px solid var(--color-border); box-shadow: 0 8px 22px -16px rgba(2,6,23,.5); }
.o-mcp__nodeicon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 11%, transparent); }
.nu[data-theme="dark"] .o-mcp__nodeicon { color: #A78BFA; background: rgba(139,92,246,.16); }
.o-mcp__nodetext { display: grid; gap: 1px; min-width: 0; }
.o-mcp__nodetext strong { font-size: 14px; font-weight: 600; }
.o-mcp__nodetext small { font-size: 12px; color: var(--color-muted-foreground); }
.o-mcp__add { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; margin-top: 4px;
  font-size: 12px; color: var(--color-muted-foreground); }

.o-mcp__center { position: relative; height: 320px; display: grid; place-items: center; }
.o-mcp__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.o-mcp__wire { fill: none; stroke: var(--color-border); stroke-width: 1.5; }
.nu[data-theme="dark"] .o-mcp__wire { stroke: #2A3244; }
.o-mcp__pulse { fill: var(--color-accent); }
.o-mcp__pulse--alt { fill: #16A34A; }
.nu[data-theme="dark"] .o-mcp__pulse { fill: #A78BFA; }

.o-mcp__agent { position: relative; z-index: 1; display: grid; place-items: center; gap: 6px;
  width: 104px; height: 104px; border-radius: 50%; background: var(--color-card);
  border: 1px solid var(--color-border); box-shadow: 0 16px 40px -20px rgba(2,6,23,.6); }
.o-mcp__agentlabel { font-size: 11.5px; font-weight: 600; color: var(--color-muted-foreground); }
.o-mcp__ring { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); animation: o-mcpring 3s ease-out infinite; }
.o-mcp__ring--2 { animation-delay: 1.5s; }
@keyframes o-mcpring { 0% { transform: scale(.92); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } }

@media (max-width: 900px) {
  .o-mcp__net { grid-template-columns: 1fr; gap: var(--space-3); }
  .o-mcp__center { height: 150px; }
  .o-mcp__wires { display: none; }
  .o-mcp__col--right { text-align: left; }
  .o-mcp__col--right .o-mcp__node { grid-template-columns: 38px 1fr; }
  .o-mcp__col--right .o-mcp__nodeicon { order: 1; }
  .o-mcp__col--right .o-mcp__nodetext { order: 2; text-align: left; }
  .o-mcp__add { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .o-mcp__ring { animation: none; opacity: 0; } .o-mcp__pulse { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   CABEÇALHO DA SEÇÃO DE AGENTES alinhado. O lead herdava `.o-lead` com
   max-width 56ch e a margem auto do `.o-center` perdia para `.nu p {margin:0}`
   (dois seletores contra um): o bloco centralizava o título e colava o
   parágrafo à esquerda. Classe própria, com a especificidade certa.
   ═══════════════════════════════════════════════════════════════════════════ */
.nu p.o-agents__lead { max-width: 60ch; margin: 14px auto 0; font-size: clamp(1rem, .97rem + .2vw, 1.125rem); line-height: 1.6; color: var(--color-muted-foreground); text-align: center; }
.o-agents__head .o-h2 { text-wrap: balance; }

/* ═══════════════════════════════════════════════════════════════════════════
   LISTA NA FRENTE, PAINEL ATRÁS (efeito merge): o painel de casos de uso fica
   deslocado para trás e para a direita, meio transparente e levemente
   desfocado, e a lista de templates fica por cima. O painel continua legível
   (opacidade .82) e clicável no que sobra para fora da lista.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-agents__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 640px; isolation: isolate; }
.o-agents__list { position: relative; z-index: 2; width: min(100%, 460px); }
.o-agents__panel {
  position: absolute; z-index: 1; right: 0; top: 24px; width: min(100%, 720px);
  opacity: .82; filter: saturate(.95);
  transform: perspective(1400px) rotateY(-4deg) translateX(0);
  transform-origin: left center;
  transition: opacity .35s var(--o-ease), filter .35s var(--o-ease), transform .45s var(--o-ease);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
}
.o-agents__grid:hover .o-agents__panel, .o-agents__panel:focus-within { opacity: 1; filter: none; transform: perspective(1400px) rotateY(0deg); }
@media (max-width: 1023px) {
  .o-agents__grid { min-height: 0; }
  .o-agents__list { width: 100%; }
  .o-agents__panel { position: static; width: 100%; opacity: 1; filter: none; transform: none; mask-image: none; -webkit-mask-image: none; margin-top: var(--space-3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDE MCP refeita: três degraus (agente → servidores MCP → ferramentas),
   alinhados por grid, setas com um pulso correndo. Sem fios em SVG soltos.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-mcp__net, .o-mcp__wires, .o-mcp__center, .o-mcp__col, .o-mcp__add { display: none; }
.o-mcp__flow { display: grid; grid-template-columns: 150px 40px minmax(0, .9fr) 40px minmax(0, 1.1fr); gap: 0; align-items: center; }
.o-mcp__step { display: grid; gap: 12px; }
.o-mcp__step--agent { justify-items: center; }
.nu p.o-mcp__steplabel { font-size: 12.5px; font-weight: 600; color: var(--color-muted-foreground); margin: 0; }
.o-mcp__agent { position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--color-card); border: 1px solid var(--color-border); box-shadow: 0 16px 40px -20px rgba(2,6,23,.6); }
.o-mcp__arrow { position: relative; display: grid; place-items: center; color: var(--color-muted-foreground); }
.o-mcp__arrow i { position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--color-accent); animation: o-mcparrow 1.6s linear infinite; }
.nu[data-theme="dark"] .o-mcp__arrow i { background: #A78BFA; }
@keyframes o-mcparrow { from { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateX(22px); opacity: 0; } }
.o-mcp__server { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 13px 15px; border-radius: 14px; background: var(--color-card); border: 1px solid var(--color-border); box-shadow: 0 8px 22px -16px rgba(2,6,23,.5); }
.o-mcp__server--native { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent), 0 8px 22px -16px rgba(2,6,23,.5); }
.o-mcp__srvicon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--color-accent); }
.nu[data-theme="dark"] .o-mcp__srvicon { background: #7C3AED; }
.o-mcp__srvtext { display: grid; gap: 1px; min-width: 0; }
.o-mcp__srvtext strong { font-size: 14.5px; font-weight: 600; }
.o-mcp__srvtext small { font-size: 12px; color: var(--color-muted-foreground); }
.o-mcp__step--tools { gap: 14px; }
.o-mcp__group { display: grid; gap: 8px; padding: 10px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); }
.o-mcp__group--yours { border-color: var(--color-border); }
.o-mcp__node { padding: 9px 12px; border-radius: 12px; }
.o-mcp__nodeicon { width: 34px; height: 34px; border-radius: 10px; }
@media (max-width: 1023px) {
  .o-mcp__flow { grid-template-columns: 1fr; gap: 8px; }
  .o-mcp__arrow { transform: rotate(90deg); height: 40px; }
  .o-mcp__step--agent { justify-items: start; grid-auto-flow: column; align-items: center; }
}

/* Merge de verdade: o painel entra POR TRÁS da lista (começa a 300px da
   esquerda, e a lista tem 460px), então ~160px dele ficam cobertos pela
   lista e o resto aparece à direita, com a máscara apagando a beira que
   encosta na lista. Antes começava 20px depois da lista e não se tocavam. */
.o-agents__panel { left: 300px; right: auto; width: min(100% - 300px, 780px); top: 8px; }
.o-agents__list { width: min(100%, 460px); }
@media (max-width: 1023px) { .o-agents__panel { left: auto; width: 100%; } }

/* ═══════════════════════════════════════════════════════════════════════════
   AGENTES: UMA composição só, três colunas dentro de um palco:
     templates  →  agente conversando  →  MCP (nativo + os seus)
   Nada sobreposto: cada coluna no seu lugar, e os fios ligam o chat ao MCP.
   As regras antigas de grid/painel/rede viram no-op.
   ═══════════════════════════════════════════════════════════════════════════ */
.o-agents__grid, .o-agents__panel, .o-agents__list, .o-agents__meta, .o-mcp { display: none; }

.o-agents__stage {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, .95fr); gap: var(--space-4);
  align-items: start; padding: var(--space-4); border-radius: var(--o-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, var(--color-card)), var(--color-card));
  border: 1px solid var(--color-border); box-shadow: var(--o-shadow);
  transition: background .4s var(--o-ease);
}
.o-agents__col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.nu p.o-agents__coltitle { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted-foreground); margin: 0 0 4px; }

/* coluna 1 */
.o-agents__col--list .o-agents__tab { padding: 11px 13px; grid-template-columns: 38px 1fr; gap: 11px; border-radius: 14px; }
.o-agents__tabicon { width: 38px; height: 38px; border-radius: 11px; }
.o-agents__tabtext strong { font-size: 14px; }
.o-agents__tabtext small { font-size: 12.25px; }
.nu p.o-agents__more { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 12.25px; line-height: 1.45; color: var(--color-muted-foreground); background: var(--color-muted); }
.nu p.o-agents__more svg { flex: 0 0 auto; margin-top: 2px; color: var(--color-accent); }

/* coluna 2: o chat, com os fios saindo pela direita */
.o-agents__col--chat { position: relative; }
.o-agents__phone { min-height: 0; border-radius: 22px; padding: 14px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 85%, #000) 0%, color-mix(in srgb, var(--c) 55%, #000) 100%); color: #fff;
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c) 70%, #000); transition: background .4s var(--o-ease); }
.o-agents__online { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; opacity: .9; }
.o-agents__online i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; }
.o-agents__uses { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); font-size: 11.5px; color: rgba(255,255,255,.85); }
.o-agents__uses em { font-style: normal; padding: 3px 9px; border-radius: 9999px; background: rgba(255,255,255,.16); font-weight: 600; font-size: 11px; color: #fff; }
.o-agents__wires { position: absolute; right: calc(-1 * var(--space-4)); top: 30px; width: var(--space-4); height: calc(100% - 30px); overflow: visible; pointer-events: none; }
.o-agents__wire { fill: none; stroke: var(--color-border); stroke-width: 1.5; }
.nu[data-theme="dark"] .o-agents__wire { stroke: #2A3244; }
.o-agents__pulse { fill: var(--c); }

/* coluna 3: MCP */
.o-agents__srv { padding: 12px; border-radius: 16px; background: var(--color-card); border: 1px solid var(--color-border); box-shadow: 0 8px 22px -16px rgba(2,6,23,.5); }
.o-agents__srv--native { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent), 0 8px 22px -16px rgba(2,6,23,.5); }
.o-agents__srvhead { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.o-agents__srvhead strong { display: block; font-size: 14px; font-weight: 600; }
.o-agents__srvhead small { display: block; font-size: 11.5px; color: var(--color-muted-foreground); }
.o-agents__srvicon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--color-accent); }
.nu[data-theme="dark"] .o-agents__srvicon { background: #7C3AED; }
.o-agents__tools { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--color-border); display: grid; gap: 8px; }
.o-agents__tools li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.o-agents__tools li > svg { margin-top: 2px; color: var(--color-accent); }
.nu[data-theme="dark"] .o-agents__tools li > svg { color: #A78BFA; }
.o-agents__tools strong { display: block; font-size: 13.25px; font-weight: 600; line-height: 1.3; }
.o-agents__tools small { display: block; font-size: 11.5px; color: var(--color-muted-foreground); }

@media (max-width: 1100px) { .o-agents__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .o-agents__col--mcp { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .o-agents__col--mcp .o-agents__coltitle { grid-column: 1 / -1; } .o-agents__wires { display: none; } }
@media (max-width: 767px) { .o-agents__stage { grid-template-columns: 1fr; padding: var(--space-3); } .o-agents__col--mcp { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .o-agents__pulse { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER em três blocos bem separados: marca | navegação | ações.
   A navegação fica centrada e as ações encostadas na direita, com espaço
   generoso entre os três, em vez de tudo grudado.
   ═══════════════════════════════════════════════════════════════════════════ */
.nu-nav__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5); min-height: 68px; }
.nu-nav__links { justify-content: center; gap: var(--space-4); }
.nu-nav__actions { display: flex; align-items: center; gap: 12px; justify-self: end; }
.nu-nav__cta { display: none; }                 /* o CTA do menu mobile */
.nu-nav__cta--bar { display: inline-flex; }     /* o da barra */
.nu-nav__theme { margin-left: 0; }

/* Central do Assinante: presente mas discreta (ainda não existe), com o
   badge colorido. `disabled` de verdade, para não prometer clique. */
.nu-nav__portal {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 14px;
  border-radius: 9999px; border: 1px dashed var(--color-border); background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--color-muted-foreground);
  opacity: .72; cursor: not-allowed; white-space: nowrap;
  transition: opacity .2s ease, border-color .2s ease;
}
.nu-nav__portal:hover { opacity: 1; border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
.nu-nav__soon {
  padding: 2px 8px; border-radius: 9999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, #8B5CF6, #16A34A);
}

@media (max-width: 1200px) { .nu-nav__portal span:not(.nu-nav__soon) { display: none; } .nu-nav__portal { padding: 0 10px; } }
@media (max-width: 900px)  { .nu-nav__cta--bar { display: none; } }
@media (max-width: 767px) {
  .nu-nav__row { grid-template-columns: auto 1fr auto; gap: var(--space-2); }
  .nu-nav__actions { gap: 8px; }
  .nu-nav__portal { display: none; }            /* volta dentro do menu */
  .nu-nav__links.is-open .nu-nav__cta { display: inline-flex; }
}

/* `.nu a, .nu button { cursor: pointer }` (0,1,1) vencia o `not-allowed` do
   botão (0,1,0): o cursor prometia um clique que não existe. */
.nu button.nu-nav__portal { cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER MAIS LARGO. Ele usava o mesmo container de 1200px do conteúdo, e
   com marca + 6 links + 3 ações não sobrava respiro. Aqui ele ganha largura
   própria (até 1560px), a logo volta ao tamanho de leitura e o CTA para de
   quebrar em duas linhas.
   ═══════════════════════════════════════════════════════════════════════════ */
.nu-nav > .nu-wrap { width: min(100% - 48px, 1560px); }
.nu-nav__row { gap: var(--space-6); min-height: 76px; }
.nu-nav__links { gap: var(--space-5); }

/* logo maior (estava em 26px, menor que a da pílula do hero) */
.nu img.o-logo { height: 32px; }

/* nada de texto quebrando dentro dos botões da barra */
.nu-nav__links > a:not(.nu-btn), .nu-nav__cta--bar, .nu-nav__portal { white-space: nowrap; }
.nu-nav__cta--bar { padding: 0 22px; min-height: 42px; }

/* as quebras de layout acompanham a barra mais larga */
@media (max-width: 1400px) { .nu-nav__portal span:not(.nu-nav__soon) { display: none; } .nu-nav__portal { padding: 0 10px; } }
@media (max-width: 1100px) { .nu-nav > .nu-wrap { width: min(100% - 32px, 1200px); } .nu-nav__row { gap: var(--space-4); } .nu-nav__links { gap: var(--space-3); } }
@media (max-width: 900px)  { .nu-nav__cta--bar { display: none; } }

/* A grade `auto 1fr auto` deixava a coluna da marca encolher quando os links
   apertavam: a logo caía de 123px para 65px e depois sumia. As colunas das
   pontas passam a ter largura mínima de conteúdo, e a navegação (1fr) é quem
   cede espaço, rolando se precisar. */
.nu-nav__row { grid-template-columns: max-content minmax(0, 1fr) max-content; }
.nu-nav__brand { flex: 0 0 auto; }
.nu img.o-logo { min-width: 118px; }
.nu-nav__links { min-width: 0; overflow: hidden; }

/* Abaixo de 1280px a barra não comporta 6 links + 3 ações: o menu vira
   hambúrguer, como já acontecia no celular, e a barra fica limpa. */
@media (max-width: 1280px) {
  .nu-nav__toggle { display: inline-flex; }
  .nu-nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; overflow: visible;
    background: var(--color-background); border-bottom: 1px solid var(--color-border);
    padding: var(--space-2); box-shadow: 0 20px 40px -24px rgba(2,6,23,.5);
  }
  .nu-nav__links.is-open { display: flex; }
  .nu-nav__links > a:not(.nu-btn) { padding: 12px 10px; border-bottom: 1px solid var(--color-border); min-width: 0; justify-content: flex-start; }
  .nu-nav__links .nu-nav__cta { display: inline-flex; margin-top: var(--space-2); }
  .nu-nav { position: sticky; }
  .nu-nav__row { grid-template-columns: max-content 1fr max-content; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /privacidade: PÁGINA DE TEXTO LONGO (política de privacidade).
   Medida de leitura de ~72ch, hierarquia enxuta (h1 > h2 > h3), listas com
   marcador na cor de destaque e sumário em cartão. Tudo abaixo de `.nu` e
   com DUAS classes na cadeia (`.nu .o-legal p`) para vencer o reset
   `.nu p { margin: 0 }` (0,1,1) sem !important.
   ═══════════════════════════════════════════════════════════════════════ */
.nu .o-legal { padding-block: var(--space-5) var(--space-7); }
.nu .o-legal__wrap { max-width: 760px; }

/* cabeçalho */
.nu .o-legal__head { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.nu .o-legal__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--color-accent); background: var(--color-muted);
}
.nu .o-legal__head h1 {
  margin-top: var(--space-2);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1; color: var(--color-foreground);
}
.nu .o-legal p.o-legal__lead {
  margin-top: var(--space-2); max-width: 64ch;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6;
  color: var(--color-muted-foreground);
}
.nu .o-legal p.o-legal__meta { margin-top: var(--space-2); font-size: 13.5px; color: var(--color-muted-foreground); }

/* sumário */
.nu .o-legal__toc {
  margin-top: var(--space-4); padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-card);
}
.nu .o-legal p.o-legal__toctitle {
  margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--color-muted-foreground);
}
.nu .o-legal__toc ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px;
}
.nu .o-legal__toc a {
  display: block; padding: 5px 0; font-size: 14.5px; line-height: 1.4;
  color: var(--color-secondary); text-decoration: none;
}
.nu .o-legal__toc a:hover { color: var(--color-accent); text-decoration: underline; }

/* seções */
.nu .o-legal__sec { margin-top: var(--space-5); scroll-margin-top: 96px; }
.nu .o-legal__sec h2 {
  font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.25; color: var(--color-foreground);
}
.nu .o-legal__sec h3 {
  margin-top: var(--space-3); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--color-foreground);
}
.nu .o-legal p { margin-top: var(--space-2); font-size: 16px; line-height: 1.7; color: var(--color-muted-foreground); }
.nu .o-legal strong { font-weight: 600; color: var(--color-foreground); }
.nu .o-legal a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.nu .o-legal__nowrap { white-space: nowrap; }

/* listas com ponto na cor de destaque */
.nu .o-legal__list { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.nu .o-legal__list li {
  position: relative; padding-left: 20px;
  font-size: 16px; line-height: 1.7; color: var(--color-muted-foreground);
}
.nu .o-legal__list li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--color-accent);
}

/* destaque */
.nu .o-legal__note {
  margin-top: var(--space-2); padding: 14px 16px;
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent);
  border-radius: 12px; background: var(--color-muted);
}
.nu .o-legal__note p { margin: 0; }

/* contato */
.nu .o-legal p.o-legal__contact { display: grid; gap: 4px; }
.nu .o-legal p.o-legal__contact a { font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.nu .o-legal p.o-legal__contact a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .nu .o-legal { padding-block: var(--space-4) var(--space-6); }
  .nu .o-legal__toc ol { grid-template-columns: 1fr; }
  .nu .o-legal__sec { margin-top: var(--space-4); }
}