/* Google Sans (OFL) servida pelo próprio domínio: subsets latin e latin-ext. */
/* latin-ext */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/google-sans-latin-ext.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: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/google-sans-latin.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;
}

/*
 * NotebookLM (hoje "Gemini Notebook"): design tokens extraídos do app em produção
 * (notebook.google.com) em 18/09/2026. Valores literais das variáveis --nlm-* e --mat-sys-*.
 * Tema claro/escuro via light-dark(): basta trocar `color-scheme` no :root.
 *
 * Fontes (Google Fonts, licença OFL):
 * <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:opsz,wght@17..18,400..700&family=Material+Symbols+Outlined:opsz,wght,FILL@20..24,400,0..1&display=swap">
 * Google Sans tem eixo opsz 17..18: com font-optical-sizing:auto, abaixo de 18px vira o
 * corte "Google Sans Text" que o app usa em corpo e labels, e a partir de 18px o corte display.
 */
:root {
  color-scheme: light dark;

  /* Marca */
  --nlm-brand-blue: #4259ff;
  --nlm-brand-green: #45ec6d;
  --nlm-brand-black: #000;
  --nlm-gradient-brand: linear-gradient(90deg, #7182ff, #3cff52);   /* só fundo/decoração: a ponta verde tem 1,34:1 sobre branco */
  --nlm-gradient-text: linear-gradient(90deg, #4259ff, #128937);    /* NSM: gradiente de TEXTO, passa AA de ponta a ponta */
  --nlm-gradient-callout: linear-gradient(267.52deg, rgba(60, 255, 82, .15) -.57%, rgba(113, 130, 255, .15) 89.06%);

  /* Escala azul (primária) */
  --nlm-blue-2: #17181c;
  --nlm-blue-5: #1d1e26;
  --nlm-blue-10: #232740;
  --nlm-blue-20: #2a3163;
  --nlm-blue-30: #2f3a8e;
  --nlm-blue-40: #384acf;
  --nlm-blue-50: #4259ff;
  --nlm-blue-60: #596cf7;
  --nlm-blue-70: #7c8bf3;
  --nlm-blue-80: #94a0f4;
  --nlm-blue-90: #c3cafc;
  --nlm-blue-95: #dbdfff;
  --nlm-blue-98: #edeffa;

  /* Escala cinza (neutra) */
  --nlm-grey-10: #1b1b1c;
  --nlm-grey-20: #303030;
  --nlm-grey-30: #474747;
  --nlm-grey-40: #5e5e5e;
  --nlm-grey-50: #777;
  --nlm-grey-60: #919191;
  --nlm-grey-70: #ababab;
  --nlm-grey-80: #c7c7c7;
  --nlm-grey-90: #e3e3e3;
  --nlm-grey-95: #f2f2f2;
  --nlm-grey-98: #f9f9f9;

  /* Superfícies */
  --nlm-surface-page: #edeffa;      /* fundo lavanda atrás dos painéis */
  --nlm-surface-page-plain: #fff;   /* home e landing */
  --nlm-surface-panel: #fff;        /* Fontes / Conversa / Estúdio */
  --nlm-surface-card: #fafafd;
  --nlm-surface-field: #f9f9f9;     /* caixa de busca de fontes */
  --nlm-surface-blue: #edeffa;      /* chip selecionado, badge PRO, card de notebook */
  --nlm-surface-caution: #fef7e0;
  --nlm-scrim: rgba(0, 0, 0, .32);

  /* Texto */
  --nlm-text-title: #1b1b1c;
  --nlm-text-body: #303030;
  --nlm-text-secondary: #5e5e5e;
  --nlm-text-ghost: #757575;   /* NSM: #777 do NotebookLM dá 4,48:1 e reprova AA */
  --nlm-text-link: #4259ff;
  --nlm-text-warning: #b06000;

  /* Traço e foco */
  --nlm-stroke: #dde1eb;
  --nlm-stroke-strong: #c4c7c5;    /* toggles e dropdown da home (mat outline-variant) */
  --nlm-focus-ring: #4259ff;

  /* CTAs */
  --nlm-cta-primary-bg: #000;          /* pílula preta: "Criar notebook", "Adicionar nota" */
  --nlm-cta-primary-fg: #fff;
  --nlm-cta-brand-bg: #4259ff;
  --nlm-cta-brand-fg: #fff;
  --nlm-cta-tonal-bg: rgba(0, 0, 0, .08);

  /* Estados (overlay sobre a cor de fundo) */
  --nlm-state-hover: rgba(0, 0, 0, .08);
  --nlm-state-focus: rgba(0, 0, 0, .12);

  /* Tiles do Estúdio: fundo + cor do conteúdo */
  --nlm-tile-blue: #edeffa;    --nlm-on-tile-blue: #224484;
  --nlm-tile-green: #e1f1e5;   --nlm-on-tile-green: #0f5223;
  --nlm-tile-yellow: #f2f2e8;  --nlm-on-tile-yellow: #796731;
  --nlm-tile-orange: #f7edeb;  --nlm-on-tile-orange: #8c2e2a;
  --nlm-tile-pink: #f0e9ef;    --nlm-on-tile-pink: #802272;
  --nlm-tile-cyan: #def1f7;    --nlm-on-tile-cyan: #056a95;

  /* Pastéis de card de notebook (versão mais escura no dark que os tiles) */
  --nlm-pastel-purple: #edeffa;
  --nlm-pastel-green: #e1f1e5;
  --nlm-pastel-yellow: #f2f2e8;
  --nlm-pastel-orange: #f7edeb;
  --nlm-pastel-pink: #f0e9ef;
  --nlm-pastel-blue: #e7f0fa;

  /* Ícones coloridos de tipo de fonte */
  --nlm-icon-blue: #3271ea;
  --nlm-icon-yellow: #fcbd00;
  --nlm-icon-red: #db372d;
  --nlm-icon-pink: #b741ff;
  --nlm-icon-green: #128937;

  /* Tipografia (escala Material 3 do app, com Google Sans) */
  --nlm-font: "Google Sans", "Google Sans Text", Roboto, Arial, sans-serif;
  --nlm-type-hero: 500 5.5rem/5.625rem var(--nlm-font);          /* landing: 88/90 */
  --nlm-type-display-large: 400 3.562rem/4rem var(--nlm-font);
  --nlm-type-headline-large: 400 2rem/2.5rem var(--nlm-font);    /* "Vamos iniciar seu notebook..." */
  --nlm-type-headline-medium: 400 1.75rem/2.25rem var(--nlm-font);
  --nlm-type-headline-small: 400 1.5rem/2rem var(--nlm-font);    /* títulos de seção e de card */
  --nlm-type-title-large: 400 1.375rem/1.75rem var(--nlm-font);  /* nome do notebook no header */
  --nlm-type-title-medium: 500 1rem/1.5rem var(--nlm-font);
  --nlm-type-panel-title: 400 1rem/1.5rem var(--nlm-font);       /* "Fontes", "Conversa", "Estúdio" */
  --nlm-type-body-large: 400 1rem/1.5rem var(--nlm-font);
  --nlm-type-body-medium: 400 .875rem/1.25rem var(--nlm-font);
  --nlm-type-body-small: 400 .75rem/1rem var(--nlm-font);
  --nlm-type-label-large: 500 .875rem/1.25rem var(--nlm-font);   /* botões */
  --nlm-type-label-medium: 500 .75rem/1rem var(--nlm-font);      /* tiles do Estúdio */
  --nlm-type-label-small: 500 .688rem/1rem var(--nlm-font);      /* tags "Novidade!" */

  /* Forma */
  --nlm-radius-xs: 4px;
  --nlm-radius-sm: 8px;     /* badge PRO, callout */
  --nlm-radius-md: 12px;    /* tiles do Estúdio, cards de notebook */
  --nlm-radius-lg: 16px;    /* painéis, campo de chat, caixa de busca */
  --nlm-radius-xl: 24px;    /* chips e segmented toggle */
  --nlm-radius-full: 9999px;/* todo botão é pílula */

  /* Espaço e medidas */
  --nlm-space-1: 4px;
  --nlm-space-2: 8px;
  --nlm-space-3: 12px;
  --nlm-space-4: 16px;      /* margem da página e gap entre painéis */
  --nlm-space-6: 24px;      /* padding interno de card */
  --nlm-header-height: 64px;
  --nlm-panel-header-height: 48px;
  --nlm-row-height: 48px;   /* item da lista de fontes */
  --nlm-tile-height: 56px;

  /* Elevação: o app é plano; sombra só no que flutua */
  --nlm-shadow-float: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
  --nlm-shadow-menu: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12);
}
/* Site institucional da NSM: design system NotebookLM (nsm-brand/APLICAR.md), tema claro fixo. */
:root { color-scheme: light; --g: clamp(16px, 4vw, 32px); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nlm-surface-page-plain);
  color: var(--nlm-text-body);
  font: var(--nlm-type-body-large);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h2, h3 { color: var(--nlm-text-title); font-weight: 400; text-wrap: balance; }
strong { color: var(--nlm-text-title); font-weight: 500; }
:focus-visible { outline: 2px solid var(--nlm-focus-ring); outline-offset: 3px; border-radius: 8px; }
.i { width: 20px; height: 20px; fill: currentColor; flex: none; }

.wrap { width: 100%; max-width: calc(1200px + 2 * var(--g)); margin-inline: auto; padding-inline: var(--g); }

/* Menu */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--nlm-stroke); }
.nav-in { height: 64px; display: flex; align-items: center; gap: 24px; }
.logo img { height: 32px; width: auto; }
.nav-links { display: flex; gap: 4px; margin-inline: auto; }
.nav-links a, .menu-panel a:not(.btn) { display: inline-flex; align-items: center; height: 40px; padding-inline: 14px; border-radius: var(--nlm-radius-full); font: var(--nlm-type-label-large); color: var(--nlm-text-secondary); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover, .menu-panel a:not(.btn):hover { background: var(--nlm-state-hover); color: var(--nlm-text-title); } }
.menu { display: none; margin-left: auto; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--nlm-text-title); }
.menu summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .menu summary:hover { background: var(--nlm-state-hover); } }
.menu summary .i { width: 24px; height: 24px; }
.menu .i-close, .menu[open] .i-menu { display: none; }
.menu[open] .i-close { display: block; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 4px; padding: 8px var(--g) 20px; background: var(--nlm-surface-panel); border-bottom: 1px solid var(--nlm-stroke); box-shadow: var(--nlm-shadow-menu); }
.menu-panel a:not(.btn) { height: 48px; border-radius: var(--nlm-radius-md); font: var(--nlm-type-title-medium); color: var(--nlm-text-title); }
.menu-panel .btn { margin-top: 8px; }
@media (max-width: 767px) {
  .nav-links, .nav-in .nav-cta { display: none; }
  .menu { display: block; }
}

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding-inline: 24px; border: 0; border-radius: var(--nlm-radius-full); font: var(--nlm-type-label-large); white-space: nowrap; cursor: pointer; }
.btn .i { width: 18px; height: 18px; transition: transform .2s; }
@media (hover: hover) and (pointer: fine) { .btn:hover .i { transform: translateX(3px); } }
.btn-primary { background: var(--nlm-cta-primary-bg); color: var(--nlm-cta-primary-fg); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .14); } }
.btn-sm { height: 40px; padding-inline: 20px; }
.btn-lg { height: 52px; padding-inline: 28px; font-size: 1rem; }

/* Seções */
.sec { padding-block: clamp(56px, 8vw, 96px); }
.sec-tint { background: var(--nlm-surface-page); }
.sec-head { display: grid; gap: 12px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.sec-head.center { margin-inline: auto; justify-items: center; text-align: center; }
.sec-head h2 { font: 400 clamp(1.75rem, 1rem + 2.4vw, 2.75rem)/1.15 var(--nlm-font); letter-spacing: -.01em; }
.sec-head p { color: var(--nlm-text-secondary); }
.eyebrow { font: var(--nlm-type-label-medium); letter-spacing: .14em; text-transform: uppercase; color: var(--nlm-brand-blue); }
.sec-tint .eyebrow { color: var(--nlm-blue-40); }
.t-blue { background: var(--nlm-tile-blue); color: var(--nlm-on-tile-blue); }
.t-green { background: var(--nlm-tile-green); color: var(--nlm-on-tile-green); }
.t-yellow { background: var(--nlm-tile-yellow); color: var(--nlm-on-tile-yellow); }
.t-pink { background: var(--nlm-tile-pink); color: var(--nlm-on-tile-pink); }
.t-cyan { background: var(--nlm-tile-cyan); color: var(--nlm-on-tile-cyan); }

/* Hero */
.hero { padding-block: clamp(32px, 7vw, 96px) clamp(40px, 5vw, 64px); text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border: 1px solid var(--nlm-stroke); border-radius: var(--nlm-radius-full); font: var(--nlm-type-label-large); color: var(--nlm-text-title); }
.pill img { width: 24px; height: 24px; border-radius: 50%; }
.hero-title { max-width: 1100px; margin: 24px auto 0; font: 500 clamp(2.125rem, 1rem + 5.2vw, 5.5rem)/1.04 var(--nlm-font); letter-spacing: -.02em; }
/* Toque: sem flash ao tocar, sem espera de duplo toque, e resposta no instante do dedo (o :hover fica só para mouse). */
html { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
.btn:active { transform: scale(.98); }
/* Degradê em laço: azul, roxo dos gráficos e verde, dois ciclos num ladrilho de 200%; deslocar um ladrilho inteiro
   (-200%) fecha sem salto. Pior ponto 4,03:1: passa AA só em texto grande, então SÓ em título de 24px ou mais. */
.grad { background: linear-gradient(90deg, #4259ff, #b741ff, #128937, #4259ff, #b741ff, #128937, #4259ff) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: grad-loop 3s linear infinite; }
@keyframes grad-loop { to { background-position: -200% 0; } }
/* Entrada do hero só em CSS (sem JS nada fica escondido). Abaixo da dobra, o JS no fim da página põe .reveal. */
.hero .wrap > * { animation: rise .7s ease both; }
.hero .wrap > :nth-child(2) { animation-delay: .08s; }
.hero .wrap > :nth-child(3) { animation-delay: .16s; }
.hero .wrap > :nth-child(4) { animation-delay: .24s; }
.hero .wrap > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
/* O H1 é o elemento de LCP: entrar com opacidade 0 atrasa o LCP em segundos no celular (PageSpeed 25/09: 5,4 s). */
.hero .wrap > .hero-title { animation: none; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease var(--d, 0s), transform .6s ease var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.hero-sub { max-width: 640px; margin: 20px auto 0; font-size: clamp(1rem, .92rem + .35vw, 1.125rem); line-height: 1.6; color: var(--nlm-text-secondary); }
.hero-cta { display: flex; justify-content: center; margin-top: 32px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 960px; margin: 56px auto 0; }
.stats li { display: grid; gap: 4px; justify-items: center; align-content: center; padding: 24px 12px; border-radius: var(--nlm-radius-lg); background: var(--nlm-surface-page); }
.stats strong { font: 400 clamp(2rem, 1.2rem + 3vw, 3.5rem)/1.1 var(--nlm-font); font-variant-numeric: tabular-nums; }
.stats span { font: var(--nlm-type-label-medium); letter-spacing: .08em; color: var(--nlm-text-secondary); }

/* Clientes */
.logos { padding-block: 8px 56px; }
.logos li { padding-right: 56px; }
.logos img { width: 160px; height: 44px; object-fit: contain; }
/* Logo de traço fino: o mesmo #878787 dos outros some no antialiasing; escurecido para igualar o peso visual. */
.logos .fino { filter: brightness(.45); }

/* Faixas que correm de lado (logos, mural e prints). Sem JS ou com movimento reduzido é um trilho de deslizar:
   a animação só liga (.on) depois que o JS duplica os itens. Respiro por padding no item, não gap, senão o laço salta. */
.marquee { overflow-x: auto; scrollbar-width: none; }
.marquee::-webkit-scrollbar { display: none; }
.marquee + .marquee { margin-top: 16px; }
.marquee ul { display: flex; align-items: center; width: max-content; }
.marquee li { flex: none; padding-right: 16px; }
.marquee.on { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
.marquee.on ul { animation: marquee 60s linear infinite; } /* a duração real vem do JS */
.marquee.on.rev ul { animation-direction: reverse; }
.marquee.on:active ul { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .marquee.on:hover ul { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(-50%); } }
.wall-head { display: grid; gap: 8px; margin-block: 56px 24px; }
.wall-head h3 { font: var(--nlm-type-headline-small); }
.wall ul { align-items: stretch; }
.wall-card { width: 300px; }
.wall-card > div { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 24px; border-radius: var(--nlm-radius-lg); background: var(--nlm-surface-page); }
.wall-card p { font: 400 1.0625rem/1.5rem var(--nlm-font); color: var(--nlm-text-title); }
.who { display: flex; align-items: center; gap: 12px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--nlm-stroke); }
.who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.who span { display: grid; min-width: 0; }
.who strong { font: var(--nlm-type-label-large); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { font: var(--nlm-type-body-small); color: var(--nlm-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marquee.prints img { height: 400px; width: auto; max-width: none; border: 1px solid var(--nlm-stroke); border-radius: var(--nlm-radius-lg); }

/* Foto do time */
.team { max-width: 720px; margin: 48px auto 0; text-align: center; }
.team img { width: 100%; height: auto; max-height: 600px; object-fit: cover; object-position: top; border-radius: var(--nlm-radius-lg); }
.team figcaption { display: grid; gap: 6px; margin-top: 20px; font: var(--nlm-type-body-medium); color: var(--nlm-text-secondary); }
.team figcaption strong { font: var(--nlm-type-headline-small); font-weight: 400; }

/* Por que escolher */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { display: grid; gap: 12px; align-content: start; padding: 28px; border-radius: var(--nlm-radius-lg); background: var(--nlm-surface-panel); }
.card h3 { font: var(--nlm-type-title-large); margin-top: 8px; }
.card p { color: var(--nlm-text-secondary); }
.sec:not(.sec-tint) .card { border: 1px solid var(--nlm-stroke); }
.svc h3 a { text-decoration: underline; text-decoration-color: var(--nlm-stroke); text-underline-offset: 4px; }
.svc-more { margin-top: 24px; color: var(--nlm-text-secondary); }
.svc-more a, .faq-a a, .foot-bottom a { color: var(--nlm-brand-blue); text-decoration: underline; text-underline-offset: 3px; }
.ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--nlm-radius-md); }
.ico .i { width: 24px; height: 24px; }

/* Faixa de CTA */
.band { text-align: center; }
.band h2 { max-width: 820px; margin: 12px auto 0; font: 400 clamp(2rem, 1rem + 3.6vw, 3.5rem)/1.1 var(--nlm-font); letter-spacing: -.015em; }
.band .btn { margin-top: 32px; }

/* Serviços */
.svc { border-radius: var(--nlm-radius-lg); background: var(--nlm-surface-panel); }
.svc li { display: grid; grid-template-columns: 72px 128px minmax(0, 1fr); gap: 24px; align-items: start; padding: 28px 32px; }
.svc li + li { border-top: 1px solid var(--nlm-stroke); }
.svc .num { font: var(--nlm-type-headline-small); color: var(--nlm-text-secondary); font-variant-numeric: tabular-nums; }
.tag { display: inline-flex; align-items: center; height: 28px; padding-inline: 12px; border-radius: var(--nlm-radius-sm); font: var(--nlm-type-label-medium); margin-top: 2px; justify-self: start; }
.svc h3 { font: var(--nlm-type-title-large); }
.svc p { margin-top: 6px; color: var(--nlm-text-secondary); }

/* Depoimentos */
.dep-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 48px); }
.dep-head .sec-head { margin-bottom: 0; }
.deps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dep { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--nlm-stroke); border-radius: var(--nlm-radius-lg); background: var(--nlm-surface-panel); }
.nsm-x-depoimento__video { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nlm-surface-page); cursor: pointer; }
.nsm-x-depoimento__video:has(iframe) { aspect-ratio: 16 / 9; }
.nsm-x-depoimento__video img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s; }
@media (hover: hover) and (pointer: fine) { .nsm-x-depoimento__video:hover img { transform: scale(1.03); } }
.nsm-x-depoimento__video iframe { display: block; width: 100%; height: 100%; border: 0; }
.nsm-x-depoimento__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .62); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nsm-x-depoimento__play .i { width: 32px; height: 32px; }
.dep-body { display: grid; gap: 2px; padding: 16px 20px 20px; }
.dep-handle { font: var(--nlm-type-body-small); color: var(--nlm-text-secondary); }
.dep-name { font: var(--nlm-type-title-medium); color: var(--nlm-text-title); }
.dep-metric { margin-top: 8px; font: 500 1.25rem/1.75rem var(--nlm-font); color: var(--nlm-brand-blue); font-variant-numeric: tabular-nums; }

/* Ecossistema */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.prod { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--nlm-radius-lg); background: var(--nlm-surface-panel); }
.prod-brand { display: flex; align-items: center; gap: 12px; font: var(--nlm-type-title-medium); color: var(--nlm-text-title); }
.prod-brand b { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--nlm-radius-md); font: 500 1.125rem/1 var(--nlm-font); }
.prod h3 { font: var(--nlm-type-headline-small); }
.prod ul { display: grid; gap: 10px; }
.prod li { display: flex; gap: 10px; align-items: flex-start; }
.prod li .i { color: var(--nlm-icon-green); margin-top: 2px; }
.prod .btn { align-self: flex-start; margin-top: auto; }
.prod ul + div { margin-top: 8px; }

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; }
.faq-list { border-top: 1px solid var(--nlm-stroke); }
.faq details { border-bottom: 1px solid var(--nlm-stroke); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 4px; cursor: pointer; font: 400 1.125rem/1.5rem var(--nlm-font); color: var(--nlm-text-title); }
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover .chev { background: var(--nlm-tile-blue); color: var(--nlm-on-tile-blue); } }
.chev { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--nlm-surface-page); color: var(--nlm-text-title); transition: transform .2s, background .2s; }
.faq details[open] .chev { transform: rotate(45deg); }
.faq-a { display: grid; gap: 12px; max-width: 70ch; padding: 0 4px 24px; }

/* Rodapé */
.foot { padding-block: 56px 24px; background: var(--nlm-surface-page); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 32px; }
.foot-brand { display: grid; gap: 16px; align-content: start; }
.foot-name { font: var(--nlm-type-title-large); color: var(--nlm-text-title); }
.foot p, .foot li a { font: var(--nlm-type-body-medium); color: var(--nlm-text-secondary); }
.foot p { max-width: 320px; }
.foot-h { margin-bottom: 8px; font: var(--nlm-type-title-medium); color: var(--nlm-text-title); }
.foot li a { display: inline-flex; align-items: center; min-height: 40px; }
@media (hover: hover) and (pointer: fine) { .foot li a:hover { color: var(--nlm-text-title); text-decoration: underline; } }
.socials { display: flex; gap: 8px; }
.social { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--nlm-stroke); border-radius: 50%; background: var(--nlm-surface-panel); color: var(--nlm-text-title); }
@media (hover: hover) and (pointer: fine) { .social:hover { background: var(--nlm-tile-blue); } }
.social svg { width: 18px; height: 18px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--nlm-stroke); }
.foot-bottom p { font: var(--nlm-type-body-small); max-width: none; }
.foot-bottom span { color: var(--nlm-blue-40); }

/* Barra fixa de CTA (#nsm-sticky) */
.nsm-x-sticky { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); margin-inline: auto; padding: 6px; border: 1px solid var(--nlm-stroke); border-radius: var(--nlm-radius-full); background: var(--nlm-surface-panel); box-shadow: var(--nlm-shadow-float); transform: translateY(calc(100% + 40px)); visibility: hidden; transition: transform .3s, visibility .3s; }
.nsm-x-sticky.is-visible { transform: none; visibility: visible; }
.nsm-x-sticky__logo { flex: none; }
.nsm-x-sticky__logo img { width: 36px; height: 36px; max-width: none; border-radius: 50%; }
.nsm-x-sticky__text { font: var(--nlm-type-label-large); color: var(--nlm-text-title); white-space: nowrap; }
.nsm-x-sticky__cta { height: 40px; padding-inline: 20px; border: 0; border-radius: var(--nlm-radius-full); background: var(--nlm-cta-primary-bg); color: var(--nlm-cta-primary-fg); font: var(--nlm-type-label-large); white-space: nowrap; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .nsm-x-sticky__cta:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .14); } }
.nsm-x-sticky__close { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--nlm-text-secondary); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .nsm-x-sticky__close:hover { background: var(--nlm-state-hover); } }
.nsm-x-sticky__close svg { width: 18px; height: 18px; }

/* Pop-up de lead (#nsm-modal) */
.nsm-x-modal { position: fixed; inset: 0; z-index: 100; display: none; overflow-y: auto; padding: 16px; background: var(--nlm-scrim); }
.nsm-x-modal.is-open { display: flex; }
body.nsm-x-modal-open { overflow: hidden; }
.nsm-x-modal__panel { position: relative; width: 100%; max-width: 520px; margin: auto; padding: 40px 32px 32px; border-radius: var(--nlm-radius-lg); background: var(--nlm-surface-panel); box-shadow: var(--nlm-shadow-float); }
.nsm-x-modal__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--nlm-text-secondary); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .nsm-x-modal__close:hover { background: var(--nlm-state-hover); } }
.nsm-x-modal__close svg { width: 20px; height: 20px; }
.nsm-x-modal__title { padding-right: 32px; font: var(--nlm-type-headline-medium); color: var(--nlm-text-title); }
.nsm-x-modal__subtitle { margin-top: 8px; font: var(--nlm-type-body-medium); color: var(--nlm-text-secondary); }
#nsm-modal-form { display: grid; gap: 16px; margin-top: 24px; }
.nsm-x-modal__group { display: grid; gap: 6px; }
.nsm-x-modal__label { font: var(--nlm-type-label-large); color: var(--nlm-text-title); }
.nsm-x-modal__input, .nsm-x-modal__select { width: 100%; height: 48px; padding-inline: 16px; border: 1px solid var(--nlm-stroke-strong); border-radius: var(--nlm-radius-md); background: var(--nlm-surface-panel); font: var(--nlm-type-body-large); color: var(--nlm-text-title); }
.nsm-x-modal__input::placeholder { color: var(--nlm-text-ghost); }
.nsm-x-modal__input:focus, .nsm-x-modal__select:focus { outline: 2px solid var(--nlm-focus-ring); outline-offset: -1px; }
.nsm-x-modal__select { -webkit-appearance: none; appearance: none; padding-right: 44px; background: var(--nlm-surface-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235e5e5e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center / 24px; }
.nsm-x-modal__legal { font: var(--nlm-type-body-small); color: var(--nlm-text-secondary); text-align: center; }
.nsm-x-modal__legal a, .foot p a { text-decoration: underline; text-underline-offset: 3px; }
.nsm-x-modal__submit { height: 52px; margin-top: 8px; border: 0; border-radius: var(--nlm-radius-full); background: var(--nlm-cta-primary-bg); color: var(--nlm-cta-primary-fg); font: 500 1rem/1 var(--nlm-font); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .nsm-x-modal__submit:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .14); } }
.nsm-x-modal__submit:disabled { opacity: .6; cursor: progress; }
.nsm-x-modal__status:empty { display: none; }
.nsm-x-modal__status { padding: 12px 16px; border-radius: var(--nlm-radius-md); background: var(--nlm-surface-page); font: var(--nlm-type-body-medium); color: var(--nlm-text-body); }
.nsm-x-modal__status[data-state="ok"] { background: var(--nlm-tile-green); color: var(--nlm-on-tile-green); }
.nsm-x-modal__status[data-state="err"] { background: var(--nlm-tile-orange); color: var(--nlm-on-tile-orange); }

@media (max-width: 900px) {
  .logos li { padding-right: 40px; }
  .logos img { width: 128px; height: 36px; }
  .grid3, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .deps { grid-template-columns: repeat(3, minmax(280px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--g)); padding: 0 var(--g) 8px; scroll-padding-inline: var(--g); scrollbar-width: none; }
  .deps::-webkit-scrollbar { display: none; }
  .dep { scroll-snap-align: start; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .stats { gap: 8px; margin-top: 40px; }
  .stats li { padding: 16px 6px; }
  .stats span { font-size: .75rem; letter-spacing: .02em; text-align: center; }
  .svc li { grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; padding: 20px; }
  .svc li > div { grid-column: 1 / -1; }
  .deps { grid-template-columns: repeat(3, minmax(78%, 1fr)); }
  .prod { padding: 24px; }
  .wall-head { margin-block: 40px 20px; }
  .wall-card { width: 276px; }
  .marquee.prints img { height: 340px; }
  .nsm-x-sticky__text { display: none; }
  .nsm-x-modal__panel { padding: 32px 20px 24px; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Páginas internas (geradas por scripts/gera-paginas.py) */
.btn-line { background: transparent; color: var(--nlm-text-title); box-shadow: inset 0 0 0 1px var(--nlm-stroke); }
@media (hover: hover) and (pointer: fine) { .btn-line:hover { background: var(--nlm-state-hover); } }
.cta-duplo { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.band .cta-duplo .btn { margin-top: 0; }
.page-hero { padding-block: clamp(32px, 6vw, 80px) clamp(32px, 4vw, 56px); }
.page-hero .wrap, .wrap.prose { max-width: calc(760px + 2 * var(--g)); }
.page-hero h1 { margin-top: 12px; font: 500 clamp(2rem, 1rem + 3.6vw, 3.5rem)/1.08 var(--nlm-font); letter-spacing: -.02em; }
.page-hero .lead { margin-top: 20px; font-size: clamp(1rem, .92rem + .35vw, 1.125rem); line-height: 1.6; color: var(--nlm-text-secondary); }
.page-hero .cta-duplo { justify-content: flex-start; }
.crumbs { font: var(--nlm-type-body-small); color: var(--nlm-text-secondary); }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.prose h2 { margin-top: 48px; font: 400 clamp(1.5rem, 1rem + 1.6vw, 2.25rem)/1.2 var(--nlm-font); letter-spacing: -.01em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 28px; font: var(--nlm-type-title-large); }
.prose p, .prose li { margin-top: 12px; line-height: 1.7; color: var(--nlm-text-body); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--nlm-brand-blue); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--nlm-text-title); font-weight: 500; }
.prose .nums { padding-left: 0; }
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 24px; }
.nums li { list-style: none; margin: 0; padding: 20px; border-radius: var(--nlm-radius-lg); background: var(--nlm-surface-page); }
.nums strong { display: block; font: 400 1.75rem/1.2 var(--nlm-font); color: var(--nlm-brand-blue); }
.nums span { display: block; margin-top: 4px; font: var(--nlm-type-body-medium); color: var(--nlm-text-secondary); }
.dep a.nsm-x-depoimento__video { display: block; }
.sec-tint .nums li { background: var(--nlm-surface-panel); }