/*==============================================================================
  NOVA LANDING DO AGENDAZ
  ------------------------------------------------------------------------------
  Folha própria, namespace `nl-`. Não toca em nada da landing de sempre.

  A identidade NÃO é nova: `--nl-primaria` é o azul que a página inicial já usa
  e `--nl-marca` é o índigo `--w-brand-700` do design system. O roxo é o mesmo
  do CRM. Nenhum tom entra na paleta por causa desta página.

  A folha é autossuficiente de propósito: a landing antiga carrega o CSS do
  template administrativo inteiro para reaproveitar comportamento de Bootstrap,
  e herdar isso aqui traria centenas de kilobytes que esta página não usa.
==============================================================================*/

:root {
    /* --- identidade, vinda do que já existe --- */
    --nl-marca: #130a78;          /* --w-brand-700 */
    --nl-marca-fundo: #0b0649;    /* --w-brand-900 */
    --nl-primaria: #4a6cf7;       /* --az-primary */
    --nl-primaria-forte: #3355e8;
    --nl-roxo: #7c3aed;
    --nl-verde: #22c55e;
    --nl-ambar: #f59e0b;

    /* --- superfícies --- */
    --nl-fundo: #ffffff;
    --nl-suave: #f5f7fe;
    --nl-superficie: #ffffff;
    --nl-borda: rgba(11, 17, 32, 0.09);
    --nl-borda-forte: rgba(74, 108, 247, 0.34);

    /* --- texto --- */
    --nl-texto: #0b1120;
    --nl-texto-fraco: #5b6884;
    --nl-texto-claro: rgba(255, 255, 255, 0.86);
    --nl-texto-claro-fraco: rgba(255, 255, 255, 0.62);

    /* --- forma --- */
    --nl-raio: 14px;
    --nl-raio-g: 22px;
    --nl-raio-pill: 999px;
    --nl-shell: 1240px;
    --nl-topo-altura: 76px;

    /* O véu atrás da barra transparente. Claro por padrão; as páginas de fundo
       escuro o trocam pelo índigo da marca. */
    --nl-topo-veu: rgba(255, 255, 255, 0.82);

    --nl-sombra-sm: 0 4px 16px -6px rgba(11, 17, 32, 0.14);
    --nl-sombra: 0 20px 45px -26px rgba(11, 17, 32, 0.3);
    --nl-sombra-g: 0 44px 90px -44px rgba(11, 17, 32, 0.4);

    --nl-rapido: 170ms;
    --nl-base: 320ms;
    --nl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    --nl-fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/*------------------------------------------------------------------------------
  Base
------------------------------------------------------------------------------*/

.nl-page {
    margin: 0;
    background: var(--nl-fundo);
    color: var(--nl-texto);
    font-family: var(--nl-fonte);
    -webkit-font-smoothing: antialiased;

    /* A página nunca rola de lado. Não é `overflow-x: hidden` escondendo
       problema: cada seção larga tem a própria caixa de rolagem. */
    overflow-x: clip;
}

.nl-page *, .nl-page *::before, .nl-page *::after { box-sizing: border-box; }

.nl-page :where(h1, h2, h3, h4, p, ul, ol) {
    margin: 0;
    padding: 0;
}

.nl-page :where(ul, ol) { list-style: none; }

.nl-page img { max-width: 100%; height: auto; }

/* A marca tem altura própria, definida no `brand.css`.

   O reset acima é `.nl-page img` — especificidade maior que a `.az-logo__img`
   de lá —, e o `height: auto` dele atropelava a medida: o logotipo saía no
   tamanho natural do arquivo e engolia o cabeçalho inteiro. */
.nl-page .az-logo__img {
    width: auto;
    height: var(--az-logo-altura);
}

.nl-topo .az-logo { --az-logo-altura: 34px; }
.nl-rodape .az-logo { --az-logo-altura: 32px; }

.nl-page :focus-visible {
    outline: 2px solid var(--nl-primaria);
    outline-offset: 3px;
    border-radius: 6px;
}

.nl-shell {
    width: 100%;
    max-width: var(--nl-shell);
    margin-inline: auto;
    padding-inline: 24px;
}

/* O primeiro Tab pula o menu inteiro e vai ao conteúdo. */
.nl-pular {
    position: absolute;
    left: 50%;
    top: -4rem;
    z-index: 200;
    transform: translateX(-50%);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--nl-raio) var(--nl-raio);
    background: var(--nl-marca);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: top var(--nl-rapido) var(--nl-ease);
}

.nl-pular:focus { top: 0; }

.nl-icone { width: 20px; height: 20px; flex: none; }

/*------------------------------------------------------------------------------
  Tipografia de seção
------------------------------------------------------------------------------*/

.nl-secao { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.nl-secao--suave { background: var(--nl-suave); }

.nl-cabeca { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.nl-cabeca--centro { margin-inline: auto; text-align: center; }

.nl-cabeca--linha {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    max-width: none;
    flex-wrap: wrap;
}

.nl-cabeca__texto {
    margin-top: 1.1rem;
    color: var(--nl-texto-fraco);
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.65;
}

.nl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-pill);
    background: var(--nl-superficie);
    color: var(--nl-primaria-forte);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: var(--nl-sombra-sm);
}

.nl-eyebrow .nl-icone { width: 15px; height: 15px; }

.nl-eyebrow--claro {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: none;
}

.nl-titulo {
    font-size: clamp(1.9rem, 4.2vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.032em;
    line-height: 1.1;
}

/* A segunda linha em azul: é ela que carrega a promessa da seção. */
.nl-titulo span { display: block; color: var(--nl-primaria-forte); }

.nl-titulo--claro { color: #fff; }
.nl-titulo--claro span { color: #a9bcff; }

/*------------------------------------------------------------------------------
  Botões
------------------------------------------------------------------------------*/

.nl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.72rem 1.3rem;
    border: 1px solid transparent;
    border-radius: var(--nl-raio-pill);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--nl-rapido) var(--nl-ease),
                background var(--nl-rapido) var(--nl-ease),
                border-color var(--nl-rapido) var(--nl-ease),
                box-shadow var(--nl-rapido) var(--nl-ease);
}

.nl-btn--grande { padding: 0.95rem 1.7rem; font-size: 1rem; }

.nl-btn--primario {
    background: var(--nl-marca);
    color: #fff;
    box-shadow: 0 12px 26px -14px rgba(19, 10, 120, 0.8);
}

.nl-btn--primario:hover {
    background: #1d1194;
    color: #fff;
    transform: translateY(-1px);
}

.nl-btn--fantasma {
    border-color: var(--nl-borda);
    background: var(--nl-superficie);
    color: var(--nl-texto);
}

.nl-btn--fantasma:hover { border-color: var(--nl-borda-forte); color: var(--nl-primaria-forte); }

.nl-btn--claro { background: #fff; color: var(--nl-marca); }
.nl-btn--claro:hover { background: #eef1ff; color: var(--nl-marca); transform: translateY(-1px); }

.nl-btn--contorno {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.nl-btn--contorno:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; }

.nl-btn .nl-icone { width: 17px; height: 17px; }

/*------------------------------------------------------------------------------
  Cabeçalho
------------------------------------------------------------------------------*/

.nl-topo {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background var(--nl-base) var(--nl-ease),
                box-shadow var(--nl-base) var(--nl-ease),
                border-color var(--nl-base) var(--nl-ease);
    border-bottom: 1px solid transparent;
}

/* Sobre o herói a barra é transparente, e agora a figura do topo passa por
   baixo dela. Sem nada no meio, o menu ficaria escrito em cima de um rosto.

   O véu resolve com um degradê do tom da própria página, forte no alto e nulo
   embaixo: devolve o contraste das palavras sem fechar a barra num retângulo e
   sem cortar a figura com uma linha. Ele vive atrás do conteúdo da barra, e
   some assim que `is-rolado` entra e a barra ganha fundo de verdade. */
.nl-topo::before {
    content: "";
    position: absolute;
    inset: -1px 0 -12%;
    z-index: -1;
    background: linear-gradient(to bottom, var(--nl-topo-veu), transparent);
    pointer-events: none;
    transition: opacity var(--nl-base) var(--nl-ease);
}

.nl-topo.is-rolado::before { opacity: 0; }

/* Nasce integrado ao hero; ao rolar, ganha corpo. */
.nl-topo.is-rolado {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(170%) blur(12px);
    -webkit-backdrop-filter: saturate(170%) blur(12px);
    border-bottom-color: var(--nl-borda);
    box-shadow: 0 10px 30px -24px rgba(11, 17, 32, 0.5);
}

/*------------------------------------------------------------------------------
  O cabeçalho enquanto flutua sobre o hero escuro

  Antes de rolar, a barra é transparente e o que está atrás dela é o azul da
  marca: tudo o que nasceu escuro precisa virar branco, inclusive a arte da
  logo — que já vem nas duas versões, bastando trocar qual delas aparece.

  Vale só nas páginas que declaram `nl-page--sobre-escuro`. Nas de fundo claro
  — agendamento, WhatsApp, clientes — a barra transparente já está sobre papel
  branco, e clarear o texto ali apagaria o menu.

  Ao rolar, `is-rolado` devolve o fundo branco e estas regras deixam de valer:
  é o mesmo seletor que desenha os dois estados, então não há como um esquecer
  o outro.
------------------------------------------------------------------------------*/

.nl-page--sobre-escuro { --nl-topo-veu: rgba(14, 8, 74, 0.72); }

.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .az-logo__img--clara { visibility: hidden; }
.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .az-logo__img--escura { visibility: visible; }

.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-nav__gatilho,
.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-topo__entrar { color: #fff; }

.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-nav__gatilho:hover,
.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-nav__gatilho[aria-expanded="true"],
.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-topo__entrar:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-topo__entrar:hover { background: none; }

.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-topo__cta {
    background: #fff;
    color: var(--nl-marca);
    box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.7);
}

.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-topo__cta:hover { background: #eef1ff; color: var(--nl-marca); }

.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-idioma__botao {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-idioma__botao:hover,
.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-idioma__botao[aria-expanded="true"] {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* Sobre o herói escuro o botão não pode ser um vidro quase invisível: ele
   ganha corpo próprio, com a cor da marca por baixo e a borda clara à volta. */
.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-topo__menu {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(19, 10, 120, 0.72);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}

.nl-page--sobre-escuro .nl-topo:not(.is-rolado) .nl-topo__menu span { background: #fff; }

.nl-topo__barra {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 76px;
}

.nl-topo__marca { flex: none; display: inline-flex; align-items: center; text-decoration: none; }

.nl-nav { flex: 1; min-width: 0; }

.nl-nav__lista { display: flex; align-items: center; gap: 0.25rem; }

.nl-nav__item { position: relative; }

.nl-nav__gatilho {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--nl-raio-pill);
    background: transparent;
    color: var(--nl-texto);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--nl-rapido) var(--nl-ease), background var(--nl-rapido) var(--nl-ease);
}

.nl-nav__gatilho:hover { background: rgba(74, 108, 247, 0.09); color: var(--nl-primaria-forte); }

.nl-nav__seta { width: 14px; height: 14px; opacity: .5; transition: transform var(--nl-rapido) var(--nl-ease); }

.nl-nav__gatilho[aria-expanded="true"] .nl-nav__seta { transform: rotate(180deg); }

/* A ponte sobre o vão.

   Entre o botão e o painel há 10px de nada. O ponteiro atravessa esse vão a
   caminho da lista e, sem a ponte, sai do item nesse instante — a lista fecharia
   debaixo do dedo. O pseudoelemento cobre o vão sem aparecer e sem roubar
   clique de quem está atrás. */
.nl-sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.nl-sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 60;

    /* Duas colunas: com cinco destinos por bloco, uma coluna só descia meia
       tela e obrigava a percorrer a lista inteira com os olhos. Lado a lado, o
       painel cabe numa olhada. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 4px;
    width: max-content;
    max-width: min(560px, calc(100vw - 48px));
    padding: 0.5rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-g);
    animation: nl-sub-entra var(--nl-rapido) var(--nl-ease);
}

.nl-sub[hidden] { display: none; }

@keyframes nl-sub-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* Só o último bloco do menu abre para a esquerda: ancorado à esquerda, o
   painel dele passaria da borda direita da janela. Nos demais o ancoramento
   continua à esquerda — invertê-los jogaria o painel para fora pelo outro
   lado, já que o gatilho está no meio da barra. */
.nl-nav__item:last-child .nl-sub { left: auto; right: 0; }

.nl-sub__item {
    display: grid;
    gap: 2px;
    padding: 0.65rem 0.8rem;
    border-radius: var(--nl-raio);
    text-decoration: none;
    transition: background var(--nl-rapido) var(--nl-ease);
}

.nl-sub__item:hover { background: var(--nl-suave); }

.nl-sub__rotulo { color: var(--nl-texto); font-size: 0.9375rem; font-weight: 600; }
.nl-sub__apoio { color: var(--nl-texto-fraco); font-size: 0.8125rem; }

.nl-topo__acoes { display: flex; align-items: center; gap: 0.75rem; flex: none; }

.nl-topo__entrar {
    color: var(--nl-texto);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.nl-topo__entrar:hover { color: var(--nl-primaria-forte); }

.nl-topo__menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border: 1px solid var(--nl-borda-forte);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 18px -8px rgba(11, 17, 32, 0.45);
    cursor: pointer;
}

/* As três barras do ícone.
   A largura é declarada em vez de herdada do `stretch` do flex: sem isso, um
   `<span>` vazio numa coluna flexível pode ser medido com zero de largura em
   alguns navegadores — e o botão aparece como uma moldura sem desenho dentro. */
.nl-topo__menu span {
    display: block;
    width: 100%;
    align-self: stretch;
    flex: none;

    /* Medida cheia, não fracionária: a barra nunca cai para zero ao ser
       arredondada na densidade de tela do aparelho. */
    height: 3px;
    border-radius: 2px;
    background: var(--nl-texto);
    transition: transform var(--nl-rapido) var(--nl-ease), opacity var(--nl-rapido) var(--nl-ease);
}

/* O hambúrguer vira X — o mesmo botão diz o que faz nos dois estados. */
.nl-topo__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nl-topo__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nl-topo__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/*------------------------------------------------------------------------------
  Idioma
------------------------------------------------------------------------------*/

.nl-idioma { position: relative; }

.nl-idioma__botao {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 36px;
    padding: 0 0.7rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-pill);
    background: #fff;
    color: var(--nl-texto-fraco);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.nl-idioma__botao:hover, .nl-idioma__botao[aria-expanded="true"] {
    border-color: var(--nl-borda-forte);
    color: var(--nl-texto);
}

.nl-idioma__lista {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    display: grid;
    gap: 2px;
    min-width: 214px;
    padding: 0.4rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio);
    background: #fff;
    box-shadow: var(--nl-sombra);
}

.nl-idioma__lista[hidden] { display: none; }

.nl-idioma__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    padding: 0 0.7rem;
    border-radius: 10px;
    color: var(--nl-texto-fraco);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.nl-idioma__item:hover { background: var(--nl-suave); color: var(--nl-texto); }
.nl-idioma__item.is-ativo { background: rgba(74, 108, 247, 0.12); color: var(--nl-primaria-forte); font-weight: 650; }

/*------------------------------------------------------------------------------
  Gaveta do celular
------------------------------------------------------------------------------*/

.nl-gaveta {
    border-top: 1px solid var(--nl-borda);
    background: #fff;
    box-shadow: var(--nl-sombra);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    animation: nl-sub-entra var(--nl-rapido) var(--nl-ease);
}

.nl-gaveta[hidden] { display: none; }

.nl-gaveta__corpo { display: grid; gap: 1.25rem; padding-block: 1.25rem 1.75rem; }

.nl-gaveta__titulo {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--nl-texto-fraco);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.nl-gaveta__link {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 0.75rem;
    border-radius: 12px;
    color: var(--nl-texto);
    font-size: 1rem;
    text-decoration: none;
}

.nl-gaveta__link:active { background: var(--nl-suave); }
.nl-gaveta__link--raiz { font-weight: 650; }

.nl-gaveta__acoes { display: grid; gap: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--nl-borda); }

/*------------------------------------------------------------------------------
  Hero
------------------------------------------------------------------------------*/

/* O hero é a primeira impressão e agora é escuro, como a seção do CRM: a
   página abre em azul-marca e só clareia depois, na faixa de benefícios.

   A margem negativa puxa o hero para debaixo da barra fixa — sem ela o fundo
   escuro começaria 76px abaixo e sobraria uma tira branca no alto. O padding
   devolve o espaço por dentro, então nada de conteúdo fica atrás do menu. */
.nl-hero {
    position: relative;
    margin-top: calc(-1 * var(--nl-topo-altura));
    padding: calc(var(--nl-topo-altura) + clamp(2.5rem, 5vw, 4.5rem)) 0 clamp(4rem, 8vw, 7rem);
    background:
        radial-gradient(ellipse 62% 55% at 80% 6%, rgba(124, 58, 237, 0.42), transparent 62%),
        radial-gradient(ellipse 70% 62% at 6% 96%, rgba(74, 108, 247, 0.30), transparent 66%),
        linear-gradient(158deg, var(--nl-marca) 0%, var(--nl-marca-fundo) 100%);
    color: #fff;
    overflow: hidden;
}

.nl-hero__fundo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.nl-hero__bolha {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
}

.nl-hero__bolha--um {
    right: -6%;
    top: -14%;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(93, 124, 255, 0.45), transparent 68%);
}

.nl-hero__bolha--dois {
    left: -12%;
    bottom: -22%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.38), transparent 68%);
}

.nl-hero__malha {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}

.nl-hero__grade {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: center;
}

.nl-hero__titulo {
    font-size: clamp(1.75rem, 3.2vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: #fff;
}

/* A segunda frase é a promessa: em lilás claro ela salta do azul do fundo. */
.nl-hero__titulo span { display: block; color: #a9bcff; }

.nl-hero__apoio {
    max-width: 54ch;
    margin-top: 1.4rem;
    color: var(--nl-texto-claro);
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    line-height: 1.65;
}

.nl-hero__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.nl-hero__selo { margin-top: 1rem; color: var(--nl-texto-claro); font-size: 0.875rem; }

.nl-hero__provas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
}

.nl-hero__provas li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--nl-raio-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--nl-texto-claro);
    font-size: 0.8125rem;
    font-weight: 600;
}

.nl-hero__provas .nl-icone { width: 15px; height: 15px; color: #a9bcff; }

/* --- a composição --- */

/* A composição é uma pilha: a pessoa ao fundo, a tela do produto na frente e
   os avisos por cima de tudo. A moldura é a própria seção — nada aqui tem
   fundo ou borda que denuncie onde uma camada termina e a outra começa. */
.nl-hero__visual {
    position: relative;
    min-height: 560px;
    display: grid;
    align-items: center;
}

/* A foto já nasce com a borda em degradê e a cor puxada para o índigo; aqui
   ela só é posicionada. O `mask-image` é um segundo fôlego de dissolução, para
   o caso de a composição ficar mais justa numa tela menor. */
.nl-hero__pessoa {
    position: absolute;
    /* Encostada na borda direita da JANELA, não na da grade: a seção é de
       ponta a ponta, e a figura faz parte do fundo dela. O cálculo é a margem
       que sobra do lado de fora do `nl-shell` mais o respiro lateral. */
    right: calc(-1 * (50vw - var(--nl-shell) / 2 + 24px));

    /* O topo da figura cai logo abaixo da barra do menu. Ela não começa com um
       corte reto: o arquivo entra desmanchando, então o que se vê na altura do
       menu é o fundo da seção virando pessoa aos poucos. */
    top: -20%;
    z-index: 0;
    width: 96%;
    max-width: 650px;
    height: auto;
    pointer-events: none;

    /* O arquivo já desmancha nas bordas. Este segundo véu é só para o pé da
       figura, que desce até o fim da dobra: ele apaga onde a seção termina,
       sem tocar na altura do celular. */
    mask-image: linear-gradient(to bottom, #000 82%, rgba(0, 0, 0, 0.4) 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, rgba(0, 0, 0, 0.4) 94%, transparent 100%);
}

.nl-tela {
    position: relative;
    z-index: 1;
    width: 76%;
    justify-self: start;
    color: var(--nl-texto);
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-g);
    overflow: hidden;

    /* Levemente inclinada: dá profundidade sem precisar de imagem. */
    transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
}

.nl-tela__topo {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--nl-borda);
    background: var(--nl-suave);
}

.nl-tela__pontos { display: inline-flex; gap: 5px; }
.nl-tela__pontos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(11, 17, 32, 0.16); }

.nl-tela__aba { color: var(--nl-texto-fraco); font-size: 0.75rem; font-weight: 700; }

.nl-tela__corpo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding: 0.8rem; }

.nl-coluna { display: grid; gap: 0.5rem; align-content: start; }

.nl-coluna__titulo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--nl-texto-fraco);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nl-coluna__titulo::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nl-etapa);
}

.nl-cartao-mini {
    display: grid;
    gap: 2px;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--nl-borda);
    border-left: 3px solid var(--nl-etapa);
    border-radius: 10px;
    background: #fff;
}

.nl-cartao-mini strong { font-size: 0.75rem; font-weight: 650; }
.nl-cartao-mini span { color: var(--nl-texto-fraco); font-size: 0.6875rem; }

/* --- cartões flutuantes --- */

.nl-flutua {
    position: absolute;
    z-index: 2;
    color: var(--nl-texto);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--nl-borda);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    box-shadow: var(--nl-sombra);
    animation: nl-boiar 6s ease-in-out infinite;
}

.nl-flutua strong { display: block; font-size: 0.8125rem; font-weight: 700; }
.nl-flutua span { display: block; color: var(--nl-texto-fraco); font-size: 0.75rem; }

.nl-flutua__marca { width: 6px; height: 34px; border-radius: 3px; flex: none; }
.nl-flutua__marca--azul { background: var(--nl-primaria); }
.nl-flutua__marca--verde { background: var(--nl-verde); }

.nl-flutua__ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--nl-verde);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
    flex: none;
}

.nl-flutua--lead { left: -2%; top: 4%; animation-delay: -1s; }
/* Recuado: mais à direita, o aviso cobria a marca na camisa da profissional. */
.nl-flutua--agenda { right: 21%; bottom: 17%; animation-delay: -3s; }
.nl-flutua--zap { left: 4%; bottom: 4%; animation-delay: -5s; }

@keyframes nl-boiar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

/*------------------------------------------------------------------------------
  Benefícios
------------------------------------------------------------------------------*/

/* A faixa dos quatro cards termina rente à demonstração que vem logo abaixo:
   as duas contam a mesma coisa, uma em palavras e a outra em vídeo. */
.nl-beneficios { padding-bottom: clamp(0.75rem, 1.6vw, 1.25rem); }

.nl-beneficios__grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-sm);
    overflow: hidden;
}

.nl-beneficio {
    padding: clamp(1.4rem, 2.4vw, 2rem);
    border-left: 1px solid var(--nl-borda);
    transition: background var(--nl-rapido) var(--nl-ease);
}

.nl-beneficio:first-child { border-left: 0; }
.nl-beneficio:hover { background: var(--nl-suave); }

.nl-beneficio__icone {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: rgba(74, 108, 247, 0.12);
    color: var(--nl-primaria-forte);
}

.nl-beneficio h2 { font-size: 1.0625rem; font-weight: 700; }
.nl-beneficio p { margin-top: 0.4rem; color: var(--nl-texto-fraco); font-size: 0.9375rem; line-height: 1.6; }

/*------------------------------------------------------------------------------
  Plataforma — o fluxo
------------------------------------------------------------------------------*/

.nl-fluxo {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
    position: relative;
}

/* A linha que liga os nós, atrás deles. */
.nl-fluxo::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 34px;
    height: 2px;
    background: linear-gradient(90deg, var(--nl-primaria), var(--nl-roxo));
    opacity: .25;
}

.nl-fluxo__no { position: relative; display: grid; justify-items: center; gap: 0.7rem; text-align: center; }

.nl-fluxo__bola {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border: 1px solid var(--nl-borda);
    border-radius: 50%;
    background: #fff;
    color: var(--nl-primaria-forte);
    box-shadow: var(--nl-sombra-sm);
}

.nl-fluxo__rotulo { font-size: 0.875rem; font-weight: 650; }

/*------------------------------------------------------------------------------
  CRM
------------------------------------------------------------------------------*/

.nl-crm {
    position: relative;
    padding: clamp(4rem, 9vw, 7.5rem) 0;
    background:
        radial-gradient(ellipse 70% 60% at 82% 18%, rgba(124, 58, 237, 0.34), transparent 62%),
        linear-gradient(160deg, var(--nl-marca) 0%, var(--nl-marca-fundo) 100%);
    color: #fff;
    overflow: hidden;
}

.nl-crm__grade {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.nl-crm__apoio {
    max-width: 52ch;
    margin-top: 1.3rem;
    color: var(--nl-texto-claro);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.nl-lista { display: grid; gap: 0.7rem; margin-top: 1.8rem; margin-bottom: 2rem; }

.nl-lista li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--nl-texto-claro);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.nl-lista .nl-icone { width: 18px; height: 18px; margin-top: 2px; color: #a9bcff; }

.nl-lista--escura li { color: var(--nl-texto-fraco); }
.nl-lista--escura .nl-icone { color: var(--nl-primaria); }

.nl-crm__visual { position: relative; }

.nl-quadro {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--nl-raio-g);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    box-shadow: var(--nl-sombra-g);
    overflow: hidden;
}

.nl-quadro__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nl-quadro__topo strong { font-size: 1rem; }
.nl-quadro__topo span { color: var(--nl-texto-claro-fraco); font-size: 0.8125rem; }

.nl-quadro__colunas {
    display: grid;
    grid-template-columns: repeat(4, minmax(132px, 1fr));
    gap: 0.6rem;
    padding: 1rem 0.9rem;

    /* Num notebook estreito o quadro rola dentro da própria caixa — a página
       continua sem rolagem lateral. */
    overflow-x: auto;
    scrollbar-width: thin;
}

.nl-quadro__coluna { display: grid; gap: 0.55rem; align-content: start; min-width: 132px; }

.nl-quadro__coluna header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nl-quadro__coluna header strong { font-size: 0.8125rem; }

.nl-quadro__bola { width: 8px; height: 8px; border-radius: 50%; background: var(--nl-etapa); flex: none; }

.nl-quadro__total { margin-left: auto; color: var(--nl-texto-claro-fraco); font-size: 0.6875rem; }

.nl-quadro__cartao {
    display: grid;
    gap: 3px;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 3px solid var(--nl-etapa);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.07);
}

.nl-quadro__cartao strong { font-size: 0.8125rem; font-weight: 650; }
.nl-quadro__cartao span { color: var(--nl-texto-claro-fraco); font-size: 0.75rem; }
.nl-quadro__cartao b { color: #fff; font-size: 0.8125rem; }

.nl-flutua--crm { right: -3%; bottom: -5%; color: var(--nl-texto); }

/*------------------------------------------------------------------------------
  Cards de recurso
------------------------------------------------------------------------------*/

.nl-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.1rem;
}

.nl-card {
    padding: 1.6rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    transition: transform var(--nl-rapido) var(--nl-ease),
                border-color var(--nl-rapido) var(--nl-ease),
                box-shadow var(--nl-rapido) var(--nl-ease);
}

.nl-card:hover {
    transform: translateY(-4px);
    border-color: var(--nl-borda-forte);
    box-shadow: var(--nl-sombra);
}

.nl-card__icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1.1rem;
    border-radius: 13px;
    background: rgba(19, 10, 120, 0.08);
    color: var(--nl-marca);
}

.nl-card h3 { font-size: 1.0625rem; font-weight: 700; }
.nl-card p { margin-top: 0.45rem; color: var(--nl-texto-fraco); font-size: 0.9375rem; line-height: 1.6; }

/*------------------------------------------------------------------------------
  Jornada
------------------------------------------------------------------------------*/

.nl-jornada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }

.nl-jornada__passo { display: flex; align-items: flex-start; gap: 1rem; }

.nl-jornada__numero {
    flex: none;
    color: var(--nl-primaria);
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    opacity: .38;
}

.nl-jornada__passo h3 { font-size: 1.0625rem; font-weight: 700; }
.nl-jornada__passo p { margin-top: 0.35rem; color: var(--nl-texto-fraco); font-size: 0.9375rem; line-height: 1.6; }

/*------------------------------------------------------------------------------
  Números
------------------------------------------------------------------------------*/

.nl-numeros__grade {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.nl-numeros__grade .nl-cabeca { margin-bottom: 0; }

.nl-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.nl-numero {
    padding: 1.6rem;
    border-radius: var(--nl-raio-g);
    color: #fff;
}

/* Alternando entre o índigo da marca e o roxo do CRM: as duas cores que o
   sistema já usa, sem introduzir uma terceira. */
.nl-numero:nth-child(4n+1), .nl-numero:nth-child(4n+4) {
    background: linear-gradient(150deg, var(--nl-marca), #241698);
}

.nl-numero:nth-child(4n+2), .nl-numero:nth-child(4n+3) {
    background: linear-gradient(150deg, var(--nl-roxo), #5b21b6);
}

.nl-numero__valor {
    display: block;
    font-size: clamp(2.4rem, 4.4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.nl-numero__rotulo {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nl-numero p { margin-top: 0.7rem; color: rgba(255, 255, 255, 0.76); font-size: 0.875rem; line-height: 1.55; }

/*------------------------------------------------------------------------------
  Públicos
------------------------------------------------------------------------------*/

.nl-publicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

.nl-publico {
    padding: clamp(1.6rem, 3vw, 2.4rem);
    border: 1px solid var(--nl-borda);
    border-top: 3px solid var(--nl-tom, var(--nl-primaria));
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-sm);
}

.nl-publico--azul { --nl-tom: var(--nl-primaria); }
.nl-publico--roxo { --nl-tom: var(--nl-roxo); }

.nl-publico__rotulo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--nl-tom);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nl-publico__rotulo::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nl-tom);
}

.nl-publico h3 { margin-top: 0.7rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 750; letter-spacing: -0.02em; }

.nl-publico ul { display: grid; gap: 1rem; margin-top: 1.5rem; }

.nl-publico li { padding-left: 1rem; border-left: 2px solid var(--nl-borda); }
.nl-publico li strong { display: block; font-size: 0.9375rem; font-weight: 650; }
.nl-publico li span { display: block; margin-top: 0.2rem; color: var(--nl-texto-fraco); font-size: 0.875rem; line-height: 1.55; }

/*------------------------------------------------------------------------------
  Vitrine — a foto da equipe

  A imagem é o assunto da seção, então ela ocupa uma coluna inteira em vez de
  virar enfeite de canto. Em pé numa tela larga, deitada e mais baixa no
  celular: o recorte muda, o enquadramento da pessoa não.
------------------------------------------------------------------------------*/

.nl-vitrine { background: var(--nl-suave); }

.nl-vitrine__grade {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.nl-vitrine__foto {
    position: relative;
    margin: 0;
    border-radius: var(--nl-raio-g);
    background: linear-gradient(150deg, var(--nl-marca), var(--nl-roxo));
    box-shadow: var(--nl-sombra-g);
    overflow: hidden;
}

.nl-vitrine__foto img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 560px;
    object-fit: cover;
    object-position: 50% 32%;
}

.nl-vitrine__apoio {
    max-width: 54ch;
    margin-top: 1.2rem;
    color: var(--nl-texto-fraco);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.nl-vitrine__pontos { display: grid; gap: 1.1rem; margin: 2rem 0; }

.nl-vitrine__pontos li { display: flex; align-items: flex-start; gap: 0.9rem; }

.nl-vitrine__pontos strong { display: block; font-size: 1rem; font-weight: 700; }

/* O seletor desce até o `div` do texto de propósito.

   Escrito como `.nl-vitrine__pontos span`, ele também alcançava o quadradinho do ícone — que é
   um `span` irmão — e o `display: block` daqui atropelava o `display: grid`
   dele, porque tem mais especificidade. O desenho então encostava no canto
   superior esquerdo do quadrado em vez de ficar no meio. */
.nl-vitrine__pontos div span {
    display: block;
    margin-top: 0.2rem;
    color: var(--nl-texto-fraco);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.nl-vitrine__icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    background: rgba(74, 108, 247, 0.12);
    color: var(--nl-primaria-forte);
}

/*------------------------------------------------------------------------------
  Voltar ao topo

  Mesmo gesto da landing de sempre: um círculo fixo no canto, com um anel que
  mostra quanto da página já passou. Só aparece depois que há para onde voltar.
------------------------------------------------------------------------------*/

.nl-subir {
    position: fixed;
    right: clamp(14px, 2.4vw, 30px);
    bottom: clamp(14px, 2.4vw, 30px);
    z-index: 90;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 1px solid var(--nl-borda);
    border-radius: 50%;
    background: #fff;
    color: var(--nl-marca);
    cursor: pointer;
    box-shadow: var(--nl-sombra);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--nl-base) var(--nl-ease), transform var(--nl-base) var(--nl-ease);
}

.nl-subir[hidden] { display: none; }
.nl-subir.is-visivel { opacity: 1; transform: translateY(0); }
.nl-subir:hover { background: var(--nl-suave); }

.nl-subir__anel { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }

.nl-subir__anel circle {
    fill: none;
    stroke-width: 5;
    /* 2 * pi * 46, o perímetro do círculo. É o comprimento que o traço precisa
       ter para dar a volta completa uma vez só. */
    stroke-dasharray: 289;
}

.nl-subir__trilha { stroke: rgba(11, 17, 32, 0.08); }

.nl-subir__progresso {
    stroke: var(--nl-primaria);
    stroke-linecap: round;
    stroke-dashoffset: 289;
    transition: stroke-dashoffset 120ms linear;
}

.nl-subir__seta { position: relative; width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
    .nl-subir, .nl-subir__progresso { transition: none; }
}

/*------------------------------------------------------------------------------
  Segmentos — carrossel
------------------------------------------------------------------------------*/

.nl-segmentos { padding: clamp(4rem, 9vw, 7.5rem) 0; }

.nl-carrossel__controles { display: flex; align-items: center; gap: 0.6rem; }

.nl-carrossel__conta {
    margin-right: 0.4rem;
    color: var(--nl-texto-fraco);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nl-carrossel__botao {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--nl-borda);
    border-radius: 50%;
    background: #fff;
    color: var(--nl-texto);
    cursor: pointer;
    transition: border-color var(--nl-rapido) var(--nl-ease), color var(--nl-rapido) var(--nl-ease);
}

.nl-carrossel__botao:hover { border-color: var(--nl-primaria); color: var(--nl-primaria-forte); }
.nl-carrossel__botao svg { width: 20px; height: 20px; }

.nl-carrossel { overflow: hidden; border-radius: var(--nl-raio-g); }

.nl-carrossel__trilho {
    display: flex;
    transition: transform var(--nl-base) var(--nl-ease);
}

.nl-slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    min-width: 0;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    overflow: hidden;
}

/* A arte de cada segmento agora é uma foto própria, recortada individualmente
   — nada de prancha com vários retratos espremida num card. O gradiente de
   marca continua por baixo: enquanto a imagem não chega, o espaço já tem cor,
   e é ele que dá contraste ao número por cima do canto escuro. */
.nl-slide__arte {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 320px;
    background: linear-gradient(150deg, var(--nl-seg-a, var(--nl-marca)), var(--nl-seg-b, var(--nl-roxo)));
}

.nl-slide__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* O retrato foi enquadrado com a pessoa no terço de cima; cortar pelo
       centro decapitaria metade deles num card largo e baixo. */
    object-position: 50% 22%;
}

/* Véu escuro só no pé da foto: é onde o número mora. Sem ele, um número claro
   sobre uma parede clara desaparece. */
.nl-slide__arte::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 6, 73, 0.72) 0%, rgba(11, 6, 73, 0.12) 42%, transparent 70%);
}

.nl-slide__arte--barbearias { --nl-seg-a: #130a78; --nl-seg-b: #4a6cf7; }
.nl-slide__arte--saloes { --nl-seg-a: #5b21b6; --nl-seg-b: #a855f7; }
.nl-slide__arte--consultorios { --nl-seg-a: #0f5132; --nl-seg-b: #22c55e; }
.nl-slide__arte--odontologia { --nl-seg-a: #0b4f6c; --nl-seg-b: #06b6d4; }
.nl-slide__arte--personal { --nl-seg-a: #7c2d12; --nl-seg-b: #f59e0b; }
.nl-slide__arte--pilates { --nl-seg-a: #3a26a2; --nl-seg-b: #7c3aed; }
.nl-slide__arte--limpeza { --nl-seg-a: #0e4f88; --nl-seg-b: #38bdf8; }
.nl-slide__arte--assistencia { --nl-seg-a: #713f12; --nl-seg-b: #eab308; }
.nl-slide__arte--consultorias { --nl-seg-a: #1e1b4b; --nl-seg-b: #6366f1; }
.nl-slide__arte--externos { --nl-seg-a: #134e4a; --nl-seg-b: #14b8a6; }

.nl-slide__numero {
    position: absolute;
    left: clamp(1rem, 2vw, 1.6rem);
    bottom: clamp(0.4rem, 1.4vw, 1rem);
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1;
}

.nl-slide__texto { padding: clamp(1.75rem, 3.4vw, 3rem); }

.nl-slide__categoria {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: var(--nl-raio-pill);
    background: rgba(74, 108, 247, 0.12);
    color: var(--nl-primaria-forte);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.nl-slide__texto h3 {
    margin-top: 1rem;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.nl-slide__texto > p { margin-top: 0.9rem; max-width: 52ch; color: var(--nl-texto-fraco); font-size: 1rem; line-height: 1.65; }

.nl-slide__texto ul { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.5rem 0 1.8rem; }

.nl-slide__texto li {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-pill);
    color: var(--nl-texto-fraco);
    font-size: 0.8125rem;
}

/*------------------------------------------------------------------------------
  Integração
------------------------------------------------------------------------------*/

.nl-integracao__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.nl-integracao__visual { display: grid; gap: 0.75rem; }

.nl-elo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-sm);
}

/* A linha que desce ligando um elo ao seguinte. */
.nl-elo:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 38px;
    top: 100%;
    width: 2px;
    height: 0.75rem;
    background: linear-gradient(var(--nl-primaria), transparent);
}

.nl-elo__icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(74, 108, 247, 0.12);
    color: var(--nl-primaria-forte);
    flex: none;
}

.nl-elo strong { display: block; font-size: 0.9375rem; font-weight: 650; }
/* O seletor desce até o `div` do texto de propósito.

   Escrito como `.nl-elo span`, ele também alcançava o quadradinho do ícone — que é
   um `span` irmão — e o `display: block` daqui atropelava o `display: grid`
   dele, porque tem mais especificidade. O desenho então encostava no canto
   superior esquerdo do quadrado em vez de ficar no meio. */
.nl-elo div span { display: block; color: var(--nl-texto-fraco); font-size: 0.8125rem; }

/*------------------------------------------------------------------------------
  FAQ
------------------------------------------------------------------------------*/

.nl-faq__grade {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.nl-faq__lado { position: sticky; top: 108px; }

.nl-faq__ajuda {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: var(--nl-raio-g);
    background: linear-gradient(150deg, var(--nl-marca), #241698);
    color: #fff;
}

.nl-faq__ajuda strong { display: block; font-size: 1.0625rem; }
.nl-faq__ajuda p { margin: 0.4rem 0 1.1rem; color: rgba(255, 255, 255, 0.78); font-size: 0.9375rem; line-height: 1.55; }

.nl-faq__grupo {
    margin: 2rem 0 0.75rem;
    color: var(--nl-texto-fraco);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.nl-faq__grupo:first-child { margin-top: 0; }

.nl-faq__item {
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio);
    background: #fff;
    margin-bottom: 0.6rem;
    overflow: hidden;
}

.nl-faq__item h4 { margin: 0; }

.nl-faq__pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    border: 0;
    background: transparent;
    color: var(--nl-texto);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.nl-faq__pergunta:hover { color: var(--nl-primaria-forte); }

/* O sinal de mais vira menos ao abrir — sem trocar de ícone. */
.nl-faq__mais {
    position: relative;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 7px;
    background: var(--nl-suave);
}

.nl-faq__mais::before, .nl-faq__mais::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--nl-texto-fraco);
    transform: translate(-50%, -50%);
    transition: transform var(--nl-rapido) var(--nl-ease);
}

.nl-faq__mais::after { transform: translate(-50%, -50%) rotate(90deg); }

.nl-faq__pergunta[aria-expanded="true"] .nl-faq__mais::after { transform: translate(-50%, -50%) rotate(0); }
.nl-faq__pergunta[aria-expanded="true"] .nl-faq__mais { background: rgba(74, 108, 247, 0.14); }

.nl-faq__resposta { padding: 0 1.25rem 1.25rem; }
.nl-faq__resposta[hidden] { display: none; }
.nl-faq__resposta p { color: var(--nl-texto-fraco); font-size: 0.9375rem; line-height: 1.7; }

/*------------------------------------------------------------------------------
  CTA final
------------------------------------------------------------------------------*/

.nl-cta { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem); }

.nl-cta__caixa {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: clamp(20px, 3vw, 32px);
    background:
        radial-gradient(ellipse 60% 80% at 88% 20%, rgba(124, 58, 237, 0.4), transparent 62%),
        linear-gradient(140deg, var(--nl-marca), var(--nl-marca-fundo));
    color: #fff;
}

.nl-cta__eyebrow {
    display: inline-block;
    margin-bottom: 0.9rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nl-cta__titulo {
    font-size: clamp(1.75rem, 3.8vw, 2.7rem);
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.nl-cta__titulo span { display: block; color: rgba(255, 255, 255, 0.58); }

.nl-cta__caixa > div > p {
    margin-top: 1.1rem;
    max-width: 52ch;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.65;
}

.nl-cta__acoes { display: grid; gap: 0.7rem; justify-items: stretch; }
.nl-cta__selo { color: rgba(255, 255, 255, 0.62); font-size: 0.8125rem; text-align: center; }

/*------------------------------------------------------------------------------
  Rodapé
------------------------------------------------------------------------------*/

.nl-rodape { border-top: 1px solid var(--nl-borda); background: var(--nl-suave); }

.nl-rodape__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
    padding: clamp(3rem, 6vw, 4.5rem) 24px 2.5rem;
}

.nl-rodape__marca p {
    margin: 1rem 0 1.25rem;
    max-width: 40ch;
    color: var(--nl-texto-fraco);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.nl-rodape__selos { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.nl-rodape__selos span {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-pill);
    background: #fff;
    color: var(--nl-texto-fraco);
    font-size: 0.75rem;
    font-weight: 600;
}

.nl-rodape__titulo {
    margin-bottom: 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nl-texto-fraco);
}

.nl-rodape__lista { display: grid; gap: 0.55rem; }
.nl-rodape__lista a { color: var(--nl-texto-fraco); font-size: 0.9375rem; text-decoration: none; }
.nl-rodape__lista a:hover { color: var(--nl-primaria-forte); }

.nl-rodape__base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 1.25rem;
    border-top: 1px solid var(--nl-borda);
    color: var(--nl-texto-fraco);
    font-size: 0.875rem;
}

/*------------------------------------------------------------------------------
  Entrada por rolagem
------------------------------------------------------------------------------*/

[data-nl-revelar] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--nl-base) var(--nl-ease) var(--nl-atraso, 0ms),
                transform var(--nl-base) var(--nl-ease) var(--nl-atraso, 0ms);
}

[data-nl-revelar].is-visivel { opacity: 1; transform: none; }

/* Sem JavaScript nada some: a classe só é retirada quando o observador existe
   para devolvê-la. */
.nl-page:not(.nl-anima) [data-nl-revelar] { opacity: 1; transform: none; }

/*==============================================================================
  RESPONSIVO

  As quebras seguem o conteúdo, não os aparelhos: a primeira é onde a
  composição do hero deixa de caber ao lado do texto; a última, onde a grade de
  quatro colunas vira uma.
==============================================================================*/

@media (max-width: 1180px) {
    .nl-hero__grade { grid-template-columns: minmax(0, 1fr); }
    .nl-hero__visual { order: 2; margin-top: 1rem; min-height: 0; }

    /* Empilhado, a composição perde a coluna onde a pessoa cabia ao lado da
       tela: ela ficaria atrás do quadro branco, cortada pela metade. Some —
       é arte de apoio, não informação, e o `alt` vazio já diz isso. */
    .nl-hero__pessoa { display: none; }
    .nl-tela { width: 100%; }
    .nl-tela { transform: none; }

    /* Fora da composição larga, os cartões deixam de flutuar por cima e entram
       na coluna: sobrepostos numa tela estreita, eles cobriam o quadro. */
    .nl-flutua--lead, .nl-flutua--agenda, .nl-flutua--zap { position: static; margin-top: 0.6rem; animation: none; }
    .nl-hero__visual { display: grid; gap: 0.6rem; }

    .nl-crm__grade,
    .nl-numeros__grade,
    .nl-integracao__grade,
    .nl-faq__grade { grid-template-columns: minmax(0, 1fr); }

    .nl-faq__lado { position: static; }
    .nl-flutua--crm { position: static; margin-top: 0.75rem; animation: none; }

    .nl-jornada { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    /* O menu horizontal não cabe: vira gaveta. */
    .nl-nav { display: none; }
    .nl-topo__menu { display: flex; }
    .nl-topo__entrar, .nl-topo__cta { display: none; }
    .nl-topo__acoes { margin-left: auto; }

    .nl-beneficios__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nl-beneficio:nth-child(3) { border-left: 0; }
    .nl-beneficio:nth-child(n+3) { border-top: 1px solid var(--nl-borda); }

    .nl-fluxo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 0.5rem; }
    .nl-fluxo::before { display: none; }

    .nl-slide { grid-template-columns: minmax(0, 1fr); }
    .nl-slide__arte { min-height: 190px; }

    .nl-publicos { grid-template-columns: minmax(0, 1fr); }

    .nl-cta__caixa { grid-template-columns: minmax(0, 1fr); }

    .nl-rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nl-rodape__marca { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .nl-shell { padding-inline: 18px; }
    .nl-rodape__grade { padding-inline: 18px; }

    .nl-topo__barra { min-height: 66px; gap: 0.75rem; }
    :root { --nl-topo-altura: 66px; }

    .nl-hero__acoes .nl-btn { flex: 1 1 100%; }

    .nl-beneficios__grade { grid-template-columns: minmax(0, 1fr); }
    .nl-beneficio { border-left: 0; border-top: 1px solid var(--nl-borda); }
    .nl-beneficio:first-child { border-top: 0; }

    .nl-jornada { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .nl-numeros { grid-template-columns: minmax(0, 1fr); }

    .nl-cabeca--linha { flex-direction: column; align-items: flex-start; }

    .nl-slide__texto ul { gap: 0.35rem; }

    .nl-cta__acoes .nl-btn { width: 100%; }
}

@media (max-width: 400px) {
    .nl-fluxo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nl-fluxo__bola { width: 56px; height: 56px; }

    .nl-idioma__botao { height: 34px; padding: 0 0.5rem; }
    .nl-idioma__lista { right: auto; left: 0; max-width: calc(100vw - 2.5rem); }
}

/*==============================================================================
  PREFERÊNCIAS DE QUEM LÊ
==============================================================================*/

@media (prefers-reduced-motion: reduce) {
    .nl-page *,
    .nl-page *::before,
    .nl-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Quem pediu menos movimento não deve ficar sem conteúdo: a entrada some,
       o texto fica. */
    [data-nl-revelar] { opacity: 1 !important; transform: none !important; }
    .nl-flutua { animation: none !important; }
}

/*==============================================================================
  PÁGINAS DE SOLUÇÃO

  Cinco páginas com o mesmo cabeçalho, o mesmo rodapé e a mesma folha da nova
  landing — e cinco desenhos diferentes. O que varia é declarado no conteúdo:
  `cor` define o acento e `variante` define o herói e o arranjo das seções.

  Nenhum tom novo entra aqui. Os acentos saem da mesma paleta que a landing já
  usa: o azul da página inicial, o roxo do CRM, o verde do WhatsApp, o índigo
  da marca.
==============================================================================*/

.nl-sol {
    /* O acento da página. Cada `--sol-*` é lido pelas seções abaixo, então
       trocar estas quatro linhas repinta a página inteira. */
    --sol-a: var(--nl-marca);
    --sol-b: var(--nl-primaria);
    --sol-forte: var(--nl-primaria-forte);
    --sol-fraco: rgba(74, 108, 247, 0.12);
}

/* Cada página com a cor do seu assunto, e as cinco distantes o bastante para
   ninguém confundir uma com a outra numa aba do navegador:

     azul       agendamento — hora marcada, o azul que a marca já usa
     violeta    CRM         — o mesmo roxo do funil no sistema
     verde      WhatsApp    — a cor da própria conversa
     turquesa   clientes    — relacionamento, vizinha do verde sem se repetir
     índigo     equipe      — o tom da marca, para a página que fala do todo

   `--sol-a` é o fundo escuro e a cor cheia; `--sol-b` é o realce; `--sol-forte`
   é o que vai sobre papel branco e precisa passar no contraste de texto;
   `--sol-fraco` é o véu dos ícones e etiquetas. */
.nl-sol--azul { --sol-a: #12207a; --sol-b: #3b82f6; --sol-forte: #1d4ed8; --sol-fraco: rgba(59, 130, 246, 0.13); --sol-brilho: rgba(59, 130, 246, 0.42); }
.nl-sol--roxo { --sol-a: #4c1d95; --sol-b: #a855f7; --sol-forte: #7e22ce; --sol-fraco: rgba(168, 85, 247, 0.14); --sol-brilho: rgba(168, 85, 247, 0.42); }
.nl-sol--verde { --sol-a: #064e3b; --sol-b: #22c55e; --sol-forte: #15803d; --sol-fraco: rgba(34, 197, 94, 0.15); --sol-brilho: rgba(34, 197, 94, 0.42); }
.nl-sol--turquesa { --sol-a: #134e4a; --sol-b: #14b8a6; --sol-forte: #0f766e; --sol-fraco: rgba(20, 184, 166, 0.15); --sol-brilho: rgba(20, 184, 166, 0.42); }
.nl-sol--indigo { --sol-a: #1e1b4b; --sol-b: #6366f1; --sol-forte: #4338ca; --sol-fraco: rgba(99, 102, 241, 0.14); --sol-brilho: rgba(99, 102, 241, 0.42); }
/* Ametista: o acento da Inteligência Comercial. Sai da familia roxa da marca,
   um degrau mais claro que o do CRM — as duas paginas sao vizinhas e precisam
   ser distinguidas sem brigar. */
.nl-sol--ametista { --sol-a: #2a1065; --sol-b: #8b5cf6; --sol-forte: #6d28d9; --sol-fraco: rgba(139, 92, 246, 0.14); --sol-brilho: rgba(139, 92, 246, 0.42); }

/*------------------------------------------------------------------------------
  Herói — a moldura comum
------------------------------------------------------------------------------*/

.nl-sol__hero {
    position: relative;
    margin-top: calc(-1 * var(--nl-topo-altura));
    padding: calc(var(--nl-topo-altura) + clamp(2.5rem, 5vw, 4.5rem)) 0 clamp(3.5rem, 7vw, 6rem);
    overflow: hidden;
}

.nl-sol__fundo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.nl-sol__bolha { position: absolute; border-radius: 50%; filter: blur(80px); }

.nl-sol__bolha--um {
    right: -8%;
    top: -18%;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, var(--sol-b), transparent 68%);
    opacity: 0.28;
}

.nl-sol__bolha--dois {
    left: -14%;
    bottom: -26%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, var(--sol-a), transparent 68%);
    opacity: 0.22;
}

.nl-sol__malha {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--sol-malha, rgba(11, 17, 32, 0.04)) 1px, transparent 1px),
        linear-gradient(90deg, var(--sol-malha, rgba(11, 17, 32, 0.04)) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
}

/* As duas variantes escuras herdam o fundo da marca e clareiam a malha. */
.nl-sol__hero--escuro,
.nl-sol__hero--equipe {
    --sol-malha: rgba(255, 255, 255, 0.055);
    color: #fff;
    background:
        radial-gradient(ellipse 62% 55% at 80% 6%, var(--sol-brilho, rgba(124, 58, 237, 0.42)), transparent 62%),
        linear-gradient(158deg, var(--sol-a) 0%, var(--nl-marca-fundo) 100%);
}

.nl-sol__hero--centro { background: linear-gradient(180deg, var(--nl-suave), #fff 72%); }
.nl-sol__hero--conversa { background: linear-gradient(200deg, #fff 30%, var(--sol-fraco)); }
.nl-sol__hero--ficha { background: linear-gradient(180deg, #fff, var(--nl-suave)); }

/*------------------------------------------------------------------------------
  Herói — os dois arranjos
------------------------------------------------------------------------------*/

.nl-sol__centro { position: relative; max-width: 860px; text-align: center; }
.nl-sol__centro .nl-sol__acoes,
.nl-sol__centro .nl-sol__marcas { justify-content: center; }
.nl-sol__centro .nl-sol__resumo { margin-inline: auto; }

.nl-sol__duas {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

/* A conversa vem antes do texto na tela larga; na estreita a ordem do HTML
   já é a certa, e o `order` sai de cena no ponto de quebra. */
.nl-sol__duas--invertida { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); }

.nl-sol__visual { position: relative; }

.nl-sol__titulo {
    font-size: clamp(1.75rem, 3.2vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.nl-sol__titulo span { display: block; color: var(--sol-forte); }
.nl-sol__titulo--claro { color: #fff; }
.nl-sol__titulo--claro span { color: #a9bcff; }

.nl-sol__resumo {
    max-width: 58ch;
    margin-top: 1.3rem;
    color: var(--nl-texto-fraco);
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    line-height: 1.68;
}

.nl-sol__resumo--claro { color: var(--nl-texto-claro); }

.nl-sol__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.nl-sol__selo { margin-top: 1rem; color: var(--nl-texto-fraco); font-size: 0.875rem; }
.nl-sol__selo--claro { color: var(--nl-texto-claro); }

.nl-sol__marcas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }

.nl-sol__marcas li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-pill);
    background: rgba(255, 255, 255, 0.72);
    color: var(--nl-texto-fraco);
    font-size: 0.8125rem;
    font-weight: 600;
}

.nl-sol__marcas .nl-icone { width: 15px; height: 15px; color: var(--sol-forte); }

.nl-sol__marcas--claro li {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--nl-texto-claro);
}

.nl-sol__marcas--claro .nl-icone { color: #a9bcff; }

/* O acento da página vale para o botão primário e para o eyebrow. */
.nl-sol .nl-btn--primario { background: var(--sol-a); }
.nl-sol .nl-btn--primario:hover { background: var(--sol-forte); }
.nl-sol .nl-eyebrow { color: var(--sol-forte); }
.nl-sol .nl-eyebrow--claro { color: #fff; }
.nl-sol .nl-titulo span { color: var(--sol-forte); }
.nl-sol .nl-titulo--claro span { color: #a9bcff; }

/*------------------------------------------------------------------------------
  Maquete: a semana (agendamento)
------------------------------------------------------------------------------*/

.nl-semana__caixa { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }

.nl-semana {
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-g);
    overflow: hidden;
}

.nl-semana__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--nl-borda);
    background: var(--nl-suave);
}

.nl-semana__topo span { color: var(--nl-texto-fraco); font-size: 0.8125rem; }

.nl-semana__grade {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 0.6rem;
    padding: 1rem 0.9rem;

    /* Numa tela estreita a semana rola dentro da própria caixa. A página
       continua sem rolagem lateral. */
    overflow-x: auto;
    scrollbar-width: thin;
}

.nl-semana__dia { display: grid; gap: 0.45rem; align-content: start; min-width: 120px; }

.nl-semana__rotulo {
    color: var(--nl-texto-fraco);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nl-faixa {
    display: grid;
    gap: 1px;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--nl-borda);
    border-left: 3px solid var(--nl-borda-forte);
    border-radius: 10px;
    background: #fff;
}

.nl-faixa b { font-size: 0.75rem; font-weight: 700; }
.nl-faixa i { color: var(--nl-texto-fraco); font-size: 0.6875rem; font-style: normal; }

.nl-faixa--livre {
    border-left-color: var(--sol-b);
    background: var(--sol-fraco);
}

.nl-faixa--livre i { color: var(--sol-forte); font-weight: 600; }
.nl-faixa--ocupado { border-left-color: rgba(11, 17, 32, 0.22); }

.nl-flutua--semana { right: 2%; bottom: -18px; animation-delay: -2s; }

/*------------------------------------------------------------------------------
  Maquete: a conversa (WhatsApp)
------------------------------------------------------------------------------*/

.nl-chat {
    color: var(--nl-texto);
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-g);
    overflow: hidden;
}

.nl-chat__topo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--nl-borda);
    background: var(--nl-suave);
}

.nl-chat__topo strong { display: block; font-size: 0.875rem; }
.nl-chat__topo > div > span { display: block; color: var(--nl-texto-fraco); font-size: 0.75rem; }

.nl-chat__avatar,
.nl-ficha__avatar,
.nl-time__avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--sol-fraco);
    color: var(--sol-forte);
    font-size: 0.8125rem;
    font-weight: 800;
}

.nl-chat__selo {
    margin-left: auto;
    padding: 0.25rem 0.6rem;
    border-radius: var(--nl-raio-pill);
    background: var(--sol-fraco);
    color: var(--sol-forte);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.nl-chat__corpo {
    display: grid;
    gap: 0.6rem;
    padding: 1.1rem 1rem;
    background:
        radial-gradient(circle at 20% 15%, var(--sol-fraco), transparent 60%),
        var(--nl-suave);
}

.nl-bolha {
    max-width: 82%;
    padding: 0.6rem 0.8rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--nl-sombra-sm);
}

.nl-bolha p { font-size: 0.875rem; line-height: 1.5; }

.nl-bolha__pe {
    display: block;
    margin-top: 0.25rem;
    color: var(--nl-texto-fraco);
    font-size: 0.6875rem;
}

.nl-bolha--sai {
    justify-self: end;
    border-bottom-right-radius: 4px;
    background: var(--sol-fraco);
}

.nl-bolha--entra { justify-self: start; border-bottom-left-radius: 4px; }

.nl-chat__pe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--nl-borda);
}

.nl-chat__script {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-pill);
    color: var(--nl-texto-fraco);
    font-size: 0.75rem;
    font-weight: 600;
}

.nl-flutua--sol-a { right: -5%; bottom: -6%; animation-delay: -3s; }
.nl-flutua--sol-b { right: -6%; bottom: -7%; animation-delay: -2s; }
.nl-flutua--sol-c { left: -9%; bottom: -13%; animation-delay: -4s; }
.nl-flutua--sol-d { right: 3%; bottom: -20px; animation-delay: -1s; }

/*------------------------------------------------------------------------------
  Maquete: a ficha do cliente
------------------------------------------------------------------------------*/

.nl-ficha {
    color: var(--nl-texto);
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-g);
    overflow: hidden;
}

.nl-ficha__topo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--nl-borda);
}

.nl-ficha__topo strong { display: block; font-size: 0.9375rem; }
.nl-ficha__topo > div > span { display: block; color: var(--nl-texto-fraco); font-size: 0.75rem; }

.nl-ficha__marcador {
    margin-left: auto;
    padding: 0.25rem 0.6rem;
    border-radius: var(--nl-raio-pill);
    background: var(--sol-fraco);
    color: var(--sol-forte);
    font-size: 0.6875rem;
    font-weight: 700;
}

.nl-ficha__dados {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--nl-borda);
    background: var(--nl-suave);
}

.nl-ficha__dados dt {
    color: var(--nl-texto-fraco);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nl-ficha__dados dd { margin: 2px 0 0; font-size: 0.875rem; font-weight: 700; }

.nl-linha { display: grid; gap: 0; padding: 0.4rem 1.1rem 1rem; }

.nl-linha__item {
    position: relative;
    padding: 0.7rem 0 0.7rem 1.5rem;
}

/* O fio da linha do tempo, desenhado em vez de imagem. */
.nl-linha__item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.15rem;
    bottom: -0.7rem;
    width: 2px;
    background: var(--nl-borda);
}

.nl-linha__item:last-child::before { display: none; }

.nl-linha__item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sol-b);
}

.nl-linha__item--zap::after { background: var(--nl-verde); }
.nl-linha__item--funil::after { background: var(--nl-ambar); }

.nl-linha__item strong { display: block; font-size: 0.875rem; }
.nl-linha__item span { display: block; color: var(--nl-texto-fraco); font-size: 0.75rem; }

/*------------------------------------------------------------------------------
  Maquete: o quadro do dia (equipe)
------------------------------------------------------------------------------*/

.nl-time__caixa { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }

.nl-time {
    color: var(--nl-texto);
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-g);
    overflow: hidden;
}

.nl-time__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--nl-borda);
    background: var(--nl-suave);
}

.nl-time__topo span { color: var(--nl-texto-fraco); font-size: 0.8125rem; }

.nl-time__grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 0.75rem;
    padding: 1.1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.nl-time__pessoa {
    display: grid;
    gap: 0.3rem;
    min-width: 160px;
    padding: 0.9rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio);
    background: #fff;
}

.nl-time__pessoa strong { font-size: 0.875rem; }
.nl-time__funcao { color: var(--nl-texto-fraco); font-size: 0.75rem; }

.nl-time__barras { display: flex; gap: 3px; margin-top: 0.45rem; }

.nl-time__barra {
    height: 8px;
    flex: 1;
    border-radius: 3px;
    background: var(--nl-borda);
}

.nl-time__barra--cheia { background: var(--sol-b); }

.nl-time__conta { color: var(--nl-texto-fraco); font-size: 0.6875rem; }

/*------------------------------------------------------------------------------
  Solução: a explicação longa
------------------------------------------------------------------------------*/

.nl-explica__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

/* Nas páginas invertidas o texto vai para a direita sem mudar o HTML: quem
   lê por leitor de tela continua recebendo título, texto e depois a lista. */
.nl-explica--invertida .nl-explica__texto { order: 2; }

.nl-explica__corpo {
    max-width: 56ch;
    margin: 1.3rem 0 2rem;
    color: var(--nl-texto-fraco);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.nl-explica__pontos { display: grid; gap: 1.2rem; }

.nl-explica__pontos li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio);
    background: #fff;
    box-shadow: var(--nl-sombra-sm);
}

.nl-explica__pontos strong { display: block; font-size: 1rem; font-weight: 700; }

/* O seletor desce até o `div` do texto de propósito.

   Escrito como `.nl-explica__pontos span`, ele também alcançava o quadradinho do ícone — que é
   um `span` irmão — e o `display: block` daqui atropelava o `display: grid`
   dele, porque tem mais especificidade. O desenho então encostava no canto
   superior esquerdo do quadrado em vez de ficar no meio. */
.nl-explica__pontos div span {
    display: block;
    margin-top: 0.25rem;
    color: var(--nl-texto-fraco);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.nl-explica__icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    background: var(--sol-fraco);
    color: var(--sol-forte);
}

/*------------------------------------------------------------------------------
  Solução: os passos, em três arranjos
------------------------------------------------------------------------------*/

.nl-passos__lista { display: grid; gap: 1.25rem; }

.nl-passo__numero {
    display: block;
    color: var(--sol-b);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
}

.nl-passo__texto strong { display: block; margin-top: 0.6rem; font-size: 1rem; font-weight: 700; }

.nl-passo__texto span {
    display: block;
    margin-top: 0.35rem;
    color: var(--nl-texto-fraco);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Trilha: os passos em fila, ligados por um fio contínuo. */
.nl-passos--trilha .nl-passos__lista {
    position: relative;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.5rem 1.25rem;
}

.nl-passos--trilha .nl-passo { position: relative; padding-top: 1.75rem; }

.nl-passos--trilha .nl-passo::before {
    content: "";
    position: absolute;
    left: 0;
    right: -1.25rem;
    top: 6px;
    height: 2px;
    background: var(--nl-borda);
}

.nl-passos--trilha .nl-passo:last-child::before { right: 0; }

.nl-passos--trilha .nl-passo::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    border: 3px solid var(--sol-b);
    border-radius: 50%;
    background: #fff;
}

/* Escada: um embaixo do outro, cada um deslocado um pouco mais à direita. */
.nl-passos--escada .nl-passos__lista { max-width: 780px; gap: 0; }

.nl-passos--escada .nl-passo {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--nl-borda);
}

.nl-passos--escada .nl-passo:first-child { border-top: 0; }
.nl-passos--escada .nl-passo__texto strong { margin-top: 0; }

/* Cartões: poucos passos, cada um com corpo próprio. */
.nl-passos--cartoes .nl-passos__lista {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.nl-passos--cartoes .nl-passo {
    padding: clamp(1.4rem, 2.6vw, 2rem);
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-sm);
}

/*------------------------------------------------------------------------------
  Solução: os recursos
------------------------------------------------------------------------------*/

.nl-recursos__grade { display: grid; gap: 1.25rem; }

.nl-recursos--tres .nl-recursos__grade { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.nl-recursos--duas .nl-recursos__grade { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.nl-recurso {
    padding: clamp(1.3rem, 2.4vw, 1.8rem);
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-sm);
    transition: transform var(--nl-rapido) var(--nl-ease), box-shadow var(--nl-rapido) var(--nl-ease);
}

.nl-recurso:hover { transform: translateY(-2px); box-shadow: var(--nl-sombra); }

.nl-recurso__icone {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border-radius: 13px;
    background: var(--sol-fraco);
    color: var(--sol-forte);
}

.nl-recurso h3 { font-size: 1.0625rem; font-weight: 700; }

.nl-recurso p {
    margin-top: 0.45rem;
    color: var(--nl-texto-fraco);
    font-size: 0.9375rem;
    line-height: 1.62;
}

/* Moldura: os cartões dividem uma caixa só, separados por fios. */
.nl-recursos--moldura .nl-recursos__grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-sm);
    overflow: hidden;
}

.nl-recursos--moldura .nl-recurso {
    border: 0;
    border-left: 1px solid var(--nl-borda);
    border-radius: 0;
    box-shadow: none;
}

.nl-recursos--moldura .nl-recurso:hover { transform: none; background: var(--nl-suave); box-shadow: none; }
.nl-recursos--moldura .nl-recurso:nth-child(3n+1) { border-left: 0; }
.nl-recursos--moldura .nl-recurso:nth-child(n+4) { border-top: 1px solid var(--nl-borda); }

/*------------------------------------------------------------------------------
  Solução: para quem
------------------------------------------------------------------------------*/

.nl-quem__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.nl-quem__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-sm);
    overflow: hidden;
    transition: transform var(--nl-rapido) var(--nl-ease), box-shadow var(--nl-rapido) var(--nl-ease);
}

.nl-quem__card:hover { transform: translateY(-3px); box-shadow: var(--nl-sombra); }

.nl-quem__foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(150deg, var(--nl-seg-a, var(--nl-marca)), var(--nl-seg-b, var(--nl-roxo)));
}

.nl-quem__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mesmo enquadramento do carrossel: a pessoa está no terço de cima. */
    object-position: 50% 22%;
}

.nl-quem__texto { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.3rem; flex: 1; }
.nl-quem__texto h3 { font-size: 1.0625rem; font-weight: 700; }
.nl-quem__texto p { color: var(--nl-texto-fraco); font-size: 0.9375rem; line-height: 1.55; }

.nl-quem__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.6rem;
    color: var(--sol-forte);
    font-size: 0.875rem;
    font-weight: 650;
    text-decoration: none;
}

.nl-quem__link .nl-icone { width: 15px; height: 15px; }
.nl-quem__card:hover .nl-quem__link { text-decoration: underline; }

/*------------------------------------------------------------------------------
  Solução: navegação entre páginas

  A sanfona de perguntas usa a marcação e o CSS da landing — nada a acrescentar
  aqui além do título fixo, que na página de solução acompanha a rolagem.
------------------------------------------------------------------------------*/

.nl-solfaq .nl-faq__lado { top: calc(var(--nl-topo-altura) + 1.5rem); }
.nl-solfaq .nl-faq__ajuda { background: linear-gradient(150deg, var(--sol-a), var(--sol-b)); }

.nl-outras__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.nl-outras__card {
    display: grid;
    gap: 0.35rem;
    padding: 1.4rem;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--nl-sombra-sm);
    transition: transform var(--nl-rapido) var(--nl-ease), border-color var(--nl-rapido) var(--nl-ease);
}

.nl-outras__card:hover { transform: translateY(-2px); border-color: var(--sol-b); }

.nl-outras__icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.4rem;
    border-radius: 12px;
    background: var(--sol-fraco);
    color: var(--sol-forte);
}

.nl-outras__card strong { font-size: 1rem; font-weight: 700; }
.nl-outras__apoio { color: var(--nl-texto-fraco); font-size: 0.875rem; line-height: 1.5; }

.nl-outras__seta { margin-top: 0.5rem; color: var(--sol-forte); }
.nl-outras__seta .nl-icone { width: 17px; height: 17px; }

/*==============================================================================
  A TELA DO SISTEMA, REDESENHADA

  As telas reais do AgendaZ em HTML: painel do CRM, agenda do mês, inbox,
  resumo do negócio e produção da equipe. Não são capturas — print carrega
  dado de gente de verdade e envelhece a cada mexida de layout. Aqui os números
  são inventados e a tela acompanha o acento da página.

  Tudo mora dentro de `.nl-app`, que tem rolagem própria: numa tela estreita a
  maquete rola dentro da moldura, e a página continua sem rolagem lateral.
==============================================================================*/

.nl-tela-sistema { background: var(--nl-suave); }

.nl-tela-sistema__nota {
    margin-top: 0.9rem;
    color: var(--nl-texto-fraco);
    font-size: 0.8125rem;
    text-align: center;
}

.nl-app {
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: #fff;
    box-shadow: var(--nl-sombra-g);
    overflow: hidden;
}

.nl-app__barra {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--nl-borda);
    background: var(--nl-suave);
}

.nl-app__pontos { display: inline-flex; gap: 5px; }
.nl-app__pontos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(11, 17, 32, 0.16); }
.nl-app__aba { color: var(--nl-texto-fraco); font-size: 0.75rem; font-weight: 700; }

.nl-app__corpo {
    padding: clamp(0.85rem, 1.6vw, 1.25rem);
    background: var(--nl-suave);

    /* A maquete tem largura mínima; quando não cabe, rola aqui dentro. */
    overflow-x: auto;
    scrollbar-width: thin;
}

/*------------------------------------------------------------------------------
  Peças comuns: indicadores, barras, rosca e tabela
------------------------------------------------------------------------------*/

.nl-painel { min-width: 640px; display: grid; gap: 0.85rem; }

.nl-painel__abas { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.nl-painel__aba {
    padding: 0.35rem 0.7rem;
    border-radius: 9px;
    color: var(--nl-texto-fraco);
    font-size: 0.75rem;
    font-weight: 650;
}

.nl-painel__aba.is-ativa { background: #fff; color: var(--sol-forte, var(--nl-primaria-forte)); box-shadow: var(--nl-sombra-sm); }

.nl-cartoes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }

.nl-kpi {
    display: grid;
    gap: 2px;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--nl-borda);
    border-left: 3px solid var(--nl-kpi-cor, var(--nl-primaria));
    border-radius: 12px;
    background: #fff;
}

.nl-kpi--azul { --nl-kpi-cor: #4a6cf7; }
.nl-kpi--verde { --nl-kpi-cor: #10b981; }
.nl-kpi--vermelho { --nl-kpi-cor: #ef4444; }
.nl-kpi--roxo { --nl-kpi-cor: #7c3aed; }
.nl-kpi--ambar { --nl-kpi-cor: #f59e0b; }

.nl-kpi__rotulo { color: var(--nl-texto-fraco); font-size: 0.6875rem; font-weight: 700; }
.nl-kpi__valor { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.nl-kpi__apoio { color: var(--nl-texto-fraco); font-size: 0.625rem; line-height: 1.35; }

.nl-painel__grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0.6rem; }

.nl-bloco {
    padding: 0.95rem 1rem 1.1rem;
    border: 1px solid var(--nl-borda);
    border-radius: 14px;
    background: #fff;
}

.nl-bloco > strong { display: block; font-size: 0.875rem; }
.nl-bloco__apoio { display: block; margin-top: 2px; color: var(--nl-texto-fraco); font-size: 0.6875rem; }

.nl-barras { display: grid; gap: 0.5rem; margin-top: 0.9rem; }

.nl-barras li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 0.5rem;
}

.nl-barras__rotulo { color: var(--nl-texto-fraco); font-size: 0.6875rem; }
.nl-barras__trilho { height: 12px; border-radius: 4px; background: var(--nl-suave); overflow: hidden; }
.nl-barras__valor { display: block; height: 100%; border-radius: 4px; background: var(--nl-primaria); }

.nl-barras__valor--cinza { background: #64748b; }
.nl-barras__valor--azul { background: #4a6cf7; }
.nl-barras__valor--roxo { background: #7c3aed; }
.nl-barras__valor--ambar { background: #f59e0b; }
.nl-barras__valor--verde { background: #10b981; }

.nl-barras__numero { color: var(--nl-texto-fraco); font-size: 0.6875rem; font-weight: 700; text-align: right; }

/* A rosca sai de um `conic-gradient` com as fatias vindas do HTML; o furo do
   meio é um `radial-gradient` por cima, e não um segundo elemento. */
.nl-rosca {
    width: 132px;
    height: 132px;
    margin: 1rem auto 0.75rem;
    border-radius: 50%;
    background: conic-gradient(var(--fatias));
    mask-image: radial-gradient(circle, transparent 54%, #000 55%);
    -webkit-mask-image: radial-gradient(circle, transparent 54%, #000 55%);
}

.nl-legenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 0.6rem; }

.nl-legenda li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--nl-texto-fraco);
    font-size: 0.625rem;
}

.nl-legenda i { width: 9px; height: 9px; flex: none; border-radius: 3px; }

.nl-tabela { display: grid; gap: 0.15rem; margin-top: 0.9rem; }

.nl-tabela li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--nl-borda);
}

.nl-tabela li:first-child { border-top: 0; }
.nl-tabela__nome { font-size: 0.75rem; font-weight: 650; }
.nl-tabela__apoio { color: var(--nl-texto-fraco); font-size: 0.6875rem; }
.nl-tabela__valor { font-size: 0.75rem; font-weight: 700; }

/*------------------------------------------------------------------------------
  A agenda do mês
------------------------------------------------------------------------------*/

.nl-mes { min-width: 660px; display: grid; gap: 0.7rem; }

.nl-mes__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nl-mes__abas { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.nl-mes__aba {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: var(--nl-texto-fraco);
    font-size: 0.75rem;
    font-weight: 650;
}

.nl-mes__aba.is-ativa { background: #fff; color: var(--sol-forte, var(--nl-primaria-forte)); box-shadow: var(--nl-sombra-sm); }

.nl-mes__acao {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--sol-a, var(--nl-marca));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.nl-mes__legenda { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.nl-mes__chave {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--nl-texto-fraco);
    font-size: 0.6875rem;
}

.nl-mes__bola { width: 8px; height: 8px; border-radius: 50%; }
.nl-mes__bola--azul { background: #4a6cf7; }
.nl-mes__bola--verde { background: #10b981; }
.nl-mes__bola--cinza { background: #94a3b8; }
.nl-mes__bola--vermelho { background: #ef4444; }

.nl-mes__grade {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--nl-borda);
    border-radius: 12px;
    background: var(--nl-borda);
    overflow: hidden;
}

.nl-mes__dia {
    padding: 0.4rem 0.5rem;
    background: var(--nl-suave);
    color: var(--nl-texto-fraco);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nl-mes__celula {
    display: grid;
    gap: 2px;
    align-content: start;
    min-height: 58px;
    padding: 0.35rem;
    background: #fff;
}

.nl-mes__celula.is-fora { background: var(--nl-suave); }
.nl-mes__celula.is-hoje { background: var(--sol-fraco, rgba(74, 108, 247, 0.12)); }

.nl-mes__numero { color: var(--nl-texto-fraco); font-size: 0.625rem; font-weight: 700; }

.nl-mes__marca {
    padding: 1px 4px;
    border-radius: 4px;
    background: #4a6cf7;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nl-mes__marca--hoje { background: #10b981; }
.nl-mes__marca--passou { background: #94a3b8; }
.nl-mes__marca--cancelado { background: #ef4444; text-decoration: line-through; }

.nl-mes__contas { display: flex; gap: 1.25rem; }

.nl-mes__conta {
    display: grid;
    color: var(--nl-texto-fraco);
    font-size: 0.6875rem;
    text-align: center;
}

.nl-mes__conta b { font-size: 1.0625rem; font-weight: 800; color: var(--nl-texto); }

/*------------------------------------------------------------------------------
  O inbox
------------------------------------------------------------------------------*/

.nl-inbox {
    min-width: 660px;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 0.6rem;
}

.nl-inbox__fila,
.nl-inbox__conversa {
    border: 1px solid var(--nl-borda);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.nl-inbox__busca {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--nl-borda);
    background: var(--nl-suave);
    color: var(--nl-texto-fraco);
    font-size: 0.6875rem;
}

.nl-inbox__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--nl-borda);
}

.nl-inbox__item:last-child { border-bottom: 0; }
.nl-inbox__item.is-ativa { background: var(--sol-fraco, rgba(74, 108, 247, 0.1)); }

.nl-inbox__avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--sol-fraco, rgba(74, 108, 247, 0.12));
    color: var(--sol-forte, var(--nl-primaria-forte));
    font-size: 0.6875rem;
    font-weight: 800;
}

.nl-inbox__texto { min-width: 0; flex: 1; }
.nl-inbox__texto strong { display: block; font-size: 0.75rem; }

.nl-inbox__texto span {
    display: block;
    color: var(--nl-texto-fraco);
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nl-inbox__lado { display: grid; gap: 3px; justify-items: end; flex: none; }
.nl-inbox__hora { color: var(--nl-texto-fraco); font-size: 0.5625rem; }

.nl-inbox__novas {
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #10b981;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
}

.nl-inbox__topo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--nl-borda);
    background: var(--nl-suave);
}

.nl-inbox__etiqueta {
    margin-left: auto;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--sol-fraco, rgba(74, 108, 247, 0.12));
    color: var(--sol-forte, var(--nl-primaria-forte));
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
}

.nl-inbox__mensagens {
    display: grid;
    gap: 0.45rem;
    padding: 0.85rem;
    background: var(--nl-suave);
}

.nl-inbox__mensagens .nl-bolha { max-width: 78%; }
.nl-inbox__mensagens .nl-bolha p { font-size: 0.75rem; }

.nl-inbox__pe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.6rem 0.8rem;
    border-top: 1px solid var(--nl-borda);
}

/*------------------------------------------------------------------------------
  Solução: a foto da página

  Uma imagem por página, grande, ao lado do resumo. O lado alterna conforme a
  variante para que as cinco páginas não tenham a mesma silhueta.
------------------------------------------------------------------------------*/

.nl-solfoto { background: var(--nl-suave); }

.nl-solfoto__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

/* Trocar o lado pelo `order` mantém a ordem de leitura do HTML — figura antes
   do texto — para quem navega por leitor de tela. */
.nl-solfoto--direita .nl-solfoto__figura { order: 2; }

.nl-solfoto__figura {
    margin: 0;
    border: 1px solid var(--nl-borda);
    border-radius: var(--nl-raio-g);
    background: linear-gradient(150deg, var(--sol-a), var(--sol-b));
    box-shadow: var(--nl-sombra-g);
    overflow: hidden;
}

.nl-solfoto__figura img { display: block; width: 100%; height: auto; }

.nl-solfoto__pontos { display: grid; gap: 1.1rem; margin: 1.8rem 0 2rem; }
.nl-solfoto__pontos li { display: flex; align-items: flex-start; gap: 0.9rem; }
.nl-solfoto__pontos strong { display: block; font-size: 1rem; font-weight: 700; }

/* O seletor desce até o `div` do texto de propósito.

   Escrito como `.nl-solfoto__pontos span`, ele também alcançava o quadradinho do ícone — que é
   um `span` irmão — e o `display: block` daqui atropelava o `display: grid`
   dele, porque tem mais especificidade. O desenho então encostava no canto
   superior esquerdo do quadrado em vez de ficar no meio. */
.nl-solfoto__pontos div span {
    display: block;
    margin-top: 0.2rem;
    color: var(--nl-texto-fraco);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.nl-solfoto__icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    background: var(--sol-fraco);
    color: var(--sol-forte);
}

/* Duas seções de fundo suave não podem encostar uma na outra: a emenda some e
   vira um bloco só. Quando isso acontece, a de baixo volta ao branco. */
.nl-solfoto + .nl-quem,
.nl-tela-sistema + .nl-solfoto { background: #fff; }

/*==============================================================================
  AS PÁGINAS DE SOLUÇÃO EM TELA ESTREITA

  As grades de duas colunas viram uma só antes de a coluna ficar estreita
  demais para o conteúdo. Não há `overflow: hidden` escondendo nada: o que é
  largo de verdade — quadro do funil, agenda do mês, inbox — mora dentro de uma
  caixa com rolagem própria, e essa caixa cabe na tela.
==============================================================================*/

@media (max-width: 1180px) {
    .nl-sol__duas,
    .nl-sol__duas--invertida,
    .nl-explica__grade,
    .nl-solfoto__grade,
    .nl-vitrine__grade { grid-template-columns: minmax(0, 1fr); }

    /* Empilhado, o texto vem primeiro em todas: `order` inverteria a leitura
       sem ganho nenhum numa coluna só. */
    .nl-sol__duas--invertida .nl-sol__visual,
    .nl-explica--invertida .nl-explica__texto,
    .nl-solfoto--direita .nl-solfoto__figura { order: 0; }

    .nl-sol__duas .nl-sol__texto,
    .nl-solfoto--direita .nl-solfoto__texto { order: -1; }

    /* Fora da composição lado a lado, o cartão flutuante não tem sobre o que
       flutuar: vira mais uma linha, sem animação e sem cobrir nada. */
    .nl-flutua--sol-a,
    .nl-flutua--sol-b,
    .nl-flutua--sol-c,
    .nl-flutua--sol-d,
    .nl-flutua--semana {
        position: static;
        margin-top: 0.75rem;
        animation: none;
    }

    .nl-recursos--moldura .nl-recursos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nl-recursos--moldura .nl-recurso:nth-child(3n+1) { border-left: 1px solid var(--nl-borda); }
    .nl-recursos--moldura .nl-recurso:nth-child(2n+1) { border-left: 0; }
    .nl-recursos--moldura .nl-recurso:nth-child(n+3) { border-top: 1px solid var(--nl-borda); }
}

@media (max-width: 860px) {
    /* A ficha do cliente tem quatro medidas no topo; em duas linhas de dois
       elas continuam legíveis, em quatro colunas viram números espremidos. */
    .nl-ficha__dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .nl-passos--escada .nl-passo { grid-template-columns: 44px minmax(0, 1fr); gap: 0.9rem; }
}

@media (max-width: 720px) {
    .nl-recursos--moldura .nl-recursos__grade { grid-template-columns: minmax(0, 1fr); }
    .nl-recursos--moldura .nl-recurso { border-left: 0; border-top: 1px solid var(--nl-borda); }
    .nl-recursos--moldura .nl-recurso:first-child { border-top: 0; }

    .nl-sol__acoes .nl-btn { flex: 1 1 100%; }
    .nl-cta__acoes .nl-btn { flex: 1 1 100%; }

    /* O botão de voltar ao topo encosta no polegar, não no canto da tela. */
    .nl-subir { width: 48px; height: 48px; }
}

@media (max-width: 420px) {
    .nl-ficha__dados { grid-template-columns: minmax(0, 1fr); }
    .nl-legenda { grid-template-columns: minmax(0, 1fr); }

    /* Frase longa não pode obrigar o botão a ser mais largo que a tela. */
    .nl-btn { white-space: normal; text-align: center; }
}

/*------------------------------------------------------------------------------
  A figura do topo das páginas de solução

  Igual à da landing, nas cinco rotas: mesma largura, mesmo lado, mesma
  altura de entrada. O arquivo já chega com a borda desmanchada e a cor puxada
  para a desta página, então aqui só se decide o lugar.

  Fica encostada na borda direita da JANELA — não na da grade —, porque a seção
  é de ponta a ponta e a pessoa faz parte do fundo dela.
------------------------------------------------------------------------------*/

.nl-sol__pessoa {
    position: absolute;

    /* Sobe o bastante para o degradê do arquivo cair na altura da barra do
       menu: a imagem encosta no topo da página e, onde ela começa, o que se vê
       é a transição — nunca uma linha reta. O valor é o que deixa o rosto
       nascer logo abaixo da barra, e não atrás dela. */
    top: -8%;
    right: 0;
    z-index: 0;
    width: 41vw;
    max-width: 600px;
    height: auto;
    pointer-events: none;

    /* O pé some antes do fim da seção, para a figura não encostar na borda de
       baixo com um corte reto. */
    mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
}

/* Onde o texto é uma coluna só, a grade continua centrada — é o que alinha a
   primeira letra do título com a marca no cabeçalho. O que muda é um respiro à
   direita, do tamanho da figura, para o texto não correr por baixo dela. */
.nl-sol__hero--centro .nl-shell,
.nl-sol__hero--equipe .nl-shell { position: relative; z-index: 1; }

.nl-sol__hero--centro .nl-sol__centro,
.nl-sol__hero--equipe .nl-sol__centro {
    max-width: var(--nl-shell);
    text-align: left;
    padding-right: min(42%, 520px);
}

/* Nas de duas colunas a composição passa por cima da figura, como na landing:
   o quadro do produto na frente, a pessoa ao fundo. */
.nl-sol__duas { position: relative; z-index: 1; }

/* O WhatsApp lê ao contrário — conversa à esquerda, texto à direita —, então a
   figura troca de lado junto. À direita ela ficaria em cima do texto. */
/* No WhatsApp a figura fica à esquerda, e ali passa por baixo da marca no
   cabeçalho. Ela começa um pouco mais abaixo para a logo não disputar espaço
   com o boné de quem está atrás. */
.nl-sol__hero--conversa .nl-sol__pessoa { right: auto; left: 0; top: 7%; }

/* A equipe é a única sem quadro ao lado da figura, então ela pode respirar um
   pouco maior sem cobrir nada. */
.nl-sol__hero--equipe .nl-sol__pessoa { width: 47vw; max-width: 690px; }

/* Na página de clientes a profissional olha para o tablet, e o rosto dela nasce
   mais baixo no quadro. Sem subir mais que as outras, a ficha do cliente cairia
   bem em cima da cara dela. O arquivo dessa página tem o degradê do topo mais
   longo, justamente para caber essa subida sem deixar linha. */
.nl-sol__hero--ficha .nl-sol__pessoa { top: -20%; }

/* Onde o quadro do produto e a figura disputam a mesma faixa.

   Com o quadro ocupando a coluna inteira, a pessoa ficava atrás dele e só
   aparecia o cabelo — e aí a imagem denuncia que é uma foto colada por baixo.
   O quadro encolhe e encosta à esquerda da coluna, abrindo uma nesga até a
   borda da tela; a figura afina e ocupa essa nesga. O rosto passa a aparecer
   AO LADO do quadro, como numa arte em que os dois foram compostos juntos. */
.nl-sol__hero--escuro .nl-sol__visual,
.nl-sol__hero--ficha .nl-sol__visual { max-width: 460px; justify-self: start; }

/* O WhatsApp é o espelho disso: a conversa encosta à direita da coluna dela e
   a nesga abre do lado de fora esquerdo, onde a figura está. */
.nl-sol__hero--conversa .nl-sol__visual { max-width: 460px; justify-self: end; }

/* A figura mantém a medida da landing: quem sai da frente é o quadro, que
   encolheu acima. Encolher a pessoa também deixaria as páginas desiguais. */
.nl-sol__hero--escuro .nl-sol__pessoa,
.nl-sol__hero--ficha .nl-sol__pessoa { width: 41vw; max-width: 600px; }

@media (max-width: 1180px) {
    /* Empilhado não sobra faixa livre: a figura é apoio, não informação. */
    .nl-sol__pessoa { display: none; }

    /* Sem a figura, o respiro à direita não tem mais razão de existir. */
    .nl-sol__hero--centro .nl-sol__centro,
    .nl-sol__hero--equipe .nl-sol__centro { padding-right: 24px; }
}

/* Três segmentos por página, lado a lado numa tela larga. A grade já quebra
   sozinha para duas colunas e depois para uma, conforme o espaço aperta. */
.nl-quem__grade { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/*------------------------------------------------------------------------------
  A demonstração em vídeo

  A capa é um botão de largura cheia com a imagem dentro: o alvo do clique e o
  alvo do teclado são o mesmo elemento. O player só entra no lugar dela depois
  do primeiro clique.
------------------------------------------------------------------------------*/

/* Encosta nos quatro cards logo acima: a demonstração é a continuação deles,
   não um assunto novo. O respiro de cima vira só um intervalo, e o de baixo
   continua inteiro para separar da seção seguinte. */
.nl-video {
    background: var(--nl-suave);
    padding-top: clamp(1rem, 2vw, 1.75rem);
}

.nl-video .nl-cabeca { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.nl-video__palco {
    position: relative;
    max-width: 880px;
    margin-inline: auto;
    border-radius: var(--nl-raio-g);
    background: var(--nl-marca);
    box-shadow: var(--nl-sombra-g);
    overflow: hidden;

    /* A proporção fica na caixa, não na imagem: quando o iframe substitui a
       capa, ele herda a mesma moldura e nada salta na troca. */
    aspect-ratio: 16 / 9;
}

.nl-video__capa {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.nl-video__capa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--nl-base) var(--nl-ease), filter var(--nl-base) var(--nl-ease);
}

.nl-video__capa:hover img { transform: scale(1.02); filter: brightness(0.92); }

.nl-video__play {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: clamp(64px, 9vw, 92px);
    height: clamp(64px, 9vw, 92px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    color: var(--nl-marca);
    box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.55);
    transition: transform var(--nl-rapido) var(--nl-ease);
}

.nl-video__play svg { width: 42%; height: 42%; margin-left: 8%; }

.nl-video__capa:hover .nl-video__play { transform: translate(-50%, -50%) scale(1.06); }

/* O anel que pulsa. Decoração pura: some para quem pediu menos movimento. */
.nl-video__play::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    animation: nl-pulsa 2.4s ease-out infinite;
}

@keyframes nl-pulsa {
    0% { transform: scale(0.92); opacity: 0.9; }
    70% { transform: scale(1.18); opacity: 0; }
    100% { opacity: 0; }
}

.nl-video__rotulo {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 3vw, 2rem);
    transform: translateX(-50%);
    padding: 0.5rem 1.1rem;
    border-radius: var(--nl-raio-pill);
    background: rgba(11, 6, 73, 0.72);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 650;
    white-space: nowrap;
}

/* Com o vídeo tocando, capa e legenda saem de cena. */
.nl-video__palco.is-tocando .nl-video__capa { display: none; }

.nl-video__palco iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.nl-video__nota {
    margin-top: 1rem;
    color: var(--nl-texto-fraco);
    font-size: 0.875rem;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .nl-video__play::after { animation: none; }
    .nl-video__capa img,
    .nl-video__play { transition: none; }
}

/*------------------------------------------------------------------------------
  A camada de controle do vídeo

  O iframe é de outro domínio: nenhuma regra daqui alcança o título, o avatar do
  canal, o "compartilhar" ou a marca d'água que o YouTube desenha por cima do
  vídeo — e clicar em qualquer um deles tira a pessoa da landing. O que dá para
  fazer é não deixar o ponteiro chegar até lá: esta camada cobre o player
  inteiro e passa a ser ela quem dá o play e o pause.
------------------------------------------------------------------------------*/

.nl-video__controle {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    cursor: pointer;

    /* Pausado, escurece: é o que esconde o título e os ícones que o YouTube
       desenha justamente quando o vídeo está parado. */
    background: rgba(8, 11, 22, 0.55);
    transition: background var(--nl-base) var(--nl-ease);
}

.nl-video__controle[hidden] { display: none; }

/* `is-limpo` chega alguns segundos depois do play: é o tempo que o YouTube leva
   para esconder o próprio título. A camada some de vista, mas segue clicável —
   e é isso que mantém a interface do YouTube fora do alcance. */
.nl-video__controle.is-limpo { background: transparent; }

.nl-video__botao {
    display: grid;
    place-items: center;
    width: clamp(64px, 8vw, 84px);
    height: clamp(64px, 8vw, 84px);
    border-radius: 50%;
    background: rgba(74, 108, 247, 0.92);
    color: #fff;
    box-shadow: 0 0 0 10px rgba(74, 108, 247, 0.18), 0 18px 44px -14px rgba(0, 0, 0, 0.55);
    transition: transform var(--nl-base) var(--nl-ease), opacity var(--nl-base) var(--nl-ease);
}

.nl-video__controle:hover .nl-video__botao,
.nl-video__controle:focus-visible .nl-video__botao { transform: scale(1.06); }

/* Com o vídeo à vista, o botão só aparece quando a pessoa procura por ele. */
.nl-video__controle.is-limpo .nl-video__botao { opacity: 0; }

.nl-video__controle.is-limpo:hover .nl-video__botao,
.nl-video__controle.is-limpo:focus-visible .nl-video__botao { opacity: 1; }

.nl-video__controle svg { display: block; width: 40%; height: 40%; }

.nl-video__controle.is-tocando .nl-video__icone-play,
.nl-video__controle:not(.is-tocando) .nl-video__icone-pause { display: none; }

.nl-video__tela {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 11px;
    background: rgba(8, 11, 22, 0.6);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--nl-base) var(--nl-ease), background var(--nl-rapido) var(--nl-ease);
}

.nl-video__tela[hidden] { display: none; }
.nl-video__tela svg { width: 19px; height: 19px; }

.nl-video__palco:hover .nl-video__tela,
.nl-video__tela:focus-visible { opacity: 1; }

.nl-video__tela:hover { background: rgba(8, 11, 22, 0.85); }

/* Em tela cheia o botão fica sempre à vista: ali não há moldura para revelar. */
.nl-video__palco:fullscreen { max-width: none; border-radius: 0; }
.nl-video__palco:fullscreen .nl-video__tela { opacity: 1; }

/*==============================================================================
  Inteligência Comercial — as duas pecas proprias da pagina

  O heroi mostra a conversa com o agente, e a secao de tela mostra a visao
  geral do modulo. As duas usam `--sol-b`, o acento declarado pela pagina, para
  nascerem na cor certa sem regra duplicada.
==============================================================================*/

/*------------------------------------------------------------------------------
  O cartao da conversa (heroi)
------------------------------------------------------------------------------*/
.nl-ia {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 8, 40, 0.72);
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.75);
}

.nl-ia__topo { display: flex; align-items: center; gap: 0.8rem; }

.nl-ia__marca {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    background: var(--sol-b);
    color: #fff;
}

.nl-ia__marca svg { width: 21px; height: 21px; }
.nl-ia__topo strong { display: block; color: #fff; font-size: 0.95rem; font-weight: 700; }
.nl-ia__topo i { display: block; color: rgba(255, 255, 255, 0.55); font-size: 0.76rem; font-style: normal; }

.nl-ia__conversa { display: flex; flex-direction: column; gap: 0.7rem; }

/* A pergunta a direita, na cor do acento: o par tem de ser distinguido de
   relance, sem ler. */
.nl-ia__pergunta {
    align-self: flex-end;
    max-width: 82%;
    margin: 0;
    padding: 0.62rem 0.9rem;
    border-radius: 14px 14px 4px 14px;
    background: var(--sol-b);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.45;
}

/* A segunda pergunta entra pela metade: sugere que a conversa continua, sem
   precisar de mais uma resposta inteira ocupando altura. */
.nl-ia__pergunta--curta { opacity: 0.55; }

.nl-ia__resposta {
    align-self: flex-start;
    max-width: 94%;
    padding: 0.8rem 0.95rem;
    border-radius: 14px 14px 14px 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #22c55e;
    background: rgba(255, 255, 255, 0.05);
}

.nl-ia__resposta p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.83rem; line-height: 1.55; }
.nl-ia__resposta ul { margin: 0.55rem 0 0; padding-left: 1.05rem; display: grid; gap: 0.3rem; }
.nl-ia__resposta li { color: rgba(255, 255, 255, 0.72); font-size: 0.81rem; line-height: 1.5; }
.nl-ia__resposta li b { color: #fff; }

.nl-ia__rodape { margin-top: 0.6rem !important; color: rgba(255, 255, 255, 0.6) !important; font-size: 0.78rem !important; }
.nl-ia__nota { margin: 0; color: rgba(255, 255, 255, 0.38); font-size: 0.7rem; text-align: center; }

/*------------------------------------------------------------------------------
  A visao geral do modulo (secao "a tela por dentro")
------------------------------------------------------------------------------*/
.nl-painel-ia { display: grid; gap: 0.9rem; padding: 1.1rem; }

.nl-painel-ia__capa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--sol-a), var(--sol-b));
    color: #fff;
}

.nl-painel-ia__selo {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nl-painel-ia__capa strong { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }

.nl-painel-ia__placar { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.nl-painel-ia__placar span { display: block; padding: 0.5rem 0.75rem; border-radius: 12px; background: rgba(255, 255, 255, 0.14); }
.nl-painel-ia__placar i { display: block; font-size: 0.62rem; font-style: normal; opacity: 0.78; }
.nl-painel-ia__placar b { display: block; font-size: 0.86rem; font-weight: 700; }

.nl-painel-ia__cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }

.nl-painel-ia__cartao {
    padding: 0.8rem 0.85rem;
    border-radius: 13px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-top: 3px solid #94a3b8;
    background: #fff;
}

.nl-painel-ia__cartao b { display: block; font-size: 1.32rem; font-weight: 700; line-height: 1.1; color: #0f172a; }
.nl-painel-ia__cartao span { display: block; margin-top: 2px; font-size: 0.7rem; color: #64748b; line-height: 1.35; }
.nl-painel-ia__cartao--critico { border-top-color: #e11d48; }
.nl-painel-ia__cartao--critico b { color: #e11d48; }
.nl-painel-ia__cartao--atencao { border-top-color: #d97706; }

.nl-painel-ia__etapas {
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
}

.nl-painel-ia__etapas > strong { display: block; margin-bottom: 0.7rem; font-size: 0.82rem; color: #0f172a; }

.nl-painel-ia__etapa {
    display: grid;
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0;
    font-size: 0.75rem;
    color: #475569;
}

.nl-painel-ia__barra { height: 6px; border-radius: 999px; background: rgba(15, 23, 42, 0.07); overflow: hidden; }
.nl-painel-ia__barra i { display: block; height: 100%; border-radius: 999px; background: var(--sol-b); }
.nl-painel-ia__etapa b { color: #0f172a; font-variant-numeric: tabular-nums; }

/* O aviso flutuante desce um pouco nesta pagina: na posicao herdada ele
   cobria a legenda "Demonstracao" do proprio cartao, que e justamente a linha
   que impede alguem de achar que os numeros sao de uma conta real. */
.nl-sol--ametista .nl-flutua--sol-a { right: -4%; bottom: -14%; }

@media (max-width: 40rem) {
    .nl-painel-ia__cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nl-painel-ia__etapa { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) auto; }
    .nl-ia__pergunta, .nl-ia__resposta { max-width: 100%; }
}

/* Selo do item de menu: marca o que acabou de entrar no produto. Discreto de
   proposito -- ele acompanha o rotulo, nao compete com ele. */
.nl-sub__selo {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--nl-primaria, #4a2ce0);
    color: #fff;
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 1px;
}