/* NFScope — página inicial pública (minimalista, estilo Google) */
:root { --azul: #12305a; --azul-medio: #1b4178; --verde: #2a9a74; --texto: #202124; --cinza: #5f6368; --borda: #dfe1e5; }
html, body { height: 100%; }
body.ini { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: #fff; color: var(--texto); font-family: 'Inter', Arial, sans-serif; }

/* Menu do topo */
.ini-topo { display: flex; justify-content: flex-end; padding: 14px 24px; }
.ini-menu { display: flex; align-items: center; gap: 22px; font-size: .9rem; }
.ini-menu-item { color: var(--texto); text-decoration: none; }
.ini-menu-item:hover { text-decoration: underline; color: var(--texto); }
.ini-menu-item.is-breve { color: #9aa0a6; cursor: default; }
.ini-menu-item.is-breve:hover { text-decoration: none; }
.ini-menu-item small { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: #f1f3f4; color: var(--cinza); font-size: .68rem; font-weight: 600; vertical-align: 1px; }
.ini-botao { padding: 9px 22px; border-radius: 6px; background: var(--azul-medio); color: #fff; font-weight: 600; text-decoration: none; transition: background .15s, box-shadow .15s; }
.ini-botao:hover { background: var(--azul); color: #fff; box-shadow: 0 1px 3px rgba(60, 64, 67, .3); }

/* Centro */
.ini-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px 14vh; }
.ini-marca { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 800; letter-spacing: -.04em; color: var(--azul); user-select: none; }
.ini-marca img { width: clamp(48px, 7vw, 68px); height: auto; }
.ini-marca b { color: var(--verde); font-weight: 800; }
.ini-pesquisa { position: relative; width: min(584px, 100%); }
.ini-pesquisa .bi { position: absolute; top: 50%; left: 18px; transform: translateY(-50%); color: #9aa0a6; pointer-events: none; }
.ini-pesquisa input { width: 100%; height: 48px; padding: 0 20px 0 48px; border: 1px solid var(--borda); border-radius: 24px; background: #fff; font-size: 1rem; color: var(--texto); cursor: text; transition: box-shadow .15s, border-color .15s; }
.ini-pesquisa input:hover, .ini-pesquisa input:focus { outline: 0; border-color: rgba(223, 225, 229, 0); box-shadow: 0 1px 6px rgba(32, 33, 36, .28); }
.ini-pesquisa input::-webkit-search-cancel-button { display: none; }
.ini-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.ini-acao { padding: 9px 16px; border: 1px solid #f8f9fa; border-radius: 4px; background: #f8f9fa; color: #3c4043; font-size: .875rem; text-decoration: none; cursor: pointer; }
.ini-acao:hover { border-color: #dadce0; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); color: #202124; }

/* Rodapé */
.ini-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 14px 24px; background: #f2f2f2; border-top: 1px solid #dadce0; color: #70757a; font-size: .82rem; }

/* Modal */
.ini-modal { border: 0; border-radius: 16px; box-shadow: 0 12px 40px rgba(32, 33, 36, .25); }
.ini-modal .modal-body { position: relative; padding: 36px 32px 30px; text-align: center; }
.ini-modal-fechar { position: absolute; top: 16px; right: 16px; }
.ini-modal-icone { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: #e8f0fe; color: var(--azul-medio); font-size: 1.5rem; }
.ini-modal h2 { margin: 0 0 10px; font-size: 1.3rem; font-weight: 700; color: var(--texto); }
.ini-modal p { margin: 0 auto 22px; max-width: 380px; color: var(--cinza); font-size: .92rem; line-height: 1.5; }
.ini-modal-botoes { display: flex; flex-direction: column; gap: 10px; }
.ini-modal-botoes .btn { padding: 10px; border-radius: 8px; font-weight: 600; }
.ini-modal-botoes .btn-primary { background: var(--azul-medio); border-color: var(--azul-medio); }
.ini-modal-botoes .btn-primary:hover { background: var(--azul); border-color: var(--azul); }

@media (max-width: 575.98px) {
    .ini-topo { padding: 12px 16px; }
    .ini-menu { gap: 14px; font-size: .85rem; }
    .ini-rodape { padding: 12px 16px; justify-content: center; text-align: center; }
}

/* ---------- Telas de acesso (entrar, cadastrar) no mesmo estilo ---------- */
body.ini-acesso { background: #fff; }
.ini-acesso .ini-topo { justify-content: space-between; align-items: center; }
.ini-topo-marca { display: inline-flex; align-items: center; gap: 8px; color: var(--azul); font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.ini-topo-marca b { color: var(--verde); }
.ini-topo-marca:hover { color: var(--azul); }
.ini-menu-item.is-atual { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }
.ini-botao.is-atual { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.ini-centro-acesso { justify-content: flex-start; padding: 4vh 16px 6vh; }
.ini-marca-menor { margin-bottom: 22px; font-size: clamp(2rem, 5vw, 2.8rem); text-decoration: none; }
.ini-marca-menor img { width: clamp(40px, 5vw, 52px); }
.ini-cartao { width: min(440px, 100%); padding: 32px 32px 26px; border: 1px solid #dadce0; border-radius: 12px; background: #fff; }
.ini-cartao .auth-title { margin: 0 0 6px; font-size: 1.45rem; font-weight: 600; color: var(--texto); text-align: center; letter-spacing: -.01em; }
.ini-cartao .auth-subtitle { margin: 0 0 24px; color: var(--cinza); font-size: .92rem; text-align: center; }
.ini-cartao .form-label { font-size: .82rem; font-weight: 600; color: #3c4043; }
.ini-cartao .form-control, .ini-cartao .input-group-text, .ini-cartao .btn-toggle-password { border-color: #dadce0; }
.ini-cartao .input-group-text { background: #fff; color: #80868b; }
.ini-cartao .form-control:focus { border-color: var(--azul-medio); box-shadow: 0 0 0 3px rgba(27, 65, 120, .12); }
.ini-cartao .btn-primary { background: var(--azul-medio); border-color: var(--azul-medio); border-radius: 8px; font-weight: 600; }
.ini-cartao .btn-primary:hover { background: var(--azul); border-color: var(--azul); }
.ini-cartao .auth-note { margin-top: 18px; padding: 0; border: 0; background: none; color: var(--cinza); font-size: .8rem; justify-content: center; text-align: center; }
.ini-cartao .auth-cadastro { border-color: #ececec !important; }
.ini-ajuda { margin: 18px 0 0; color: #80868b; font-size: .8rem; text-align: center; }
@media (max-width: 575.98px) { .ini-cartao { padding: 24px 18px 20px; border: 0; } .ini-topo-marca span { display: none; } }

/* Logotipo novo (marca.css): tamanhos nas páginas públicas */
.ini-marca { gap: 0; }
.ini-marca .marca { font-size: clamp(3rem, 8vw, 5.2rem); }
.ini-marca-menor.marca { font-size: clamp(2.2rem, 5vw, 3.1rem); margin-bottom: 22px; }
.ini-topo-marca.marca { font-size: 1.35rem; }
.ini-topo-marca.marca { gap: 0; }

/* Botão "Área do cliente": arredondado, fundo cinza claro */
.ini-botao { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: 999px; background: #f1f3f4; color: #202124; font-weight: 600; }
.ini-botao .bi { font-size: 1.05rem; color: #5f6368; }
.ini-botao:hover { background: #e8eaed; color: #202124; box-shadow: none; }
.ini-botao.is-atual { box-shadow: inset 0 0 0 1px #dadce0; }

/* Logotipo em imagem: tamanhos nas páginas públicas */
.ini-marca .marca { font-size: clamp(2.6rem, 6.5vw, 4.4rem); }
.ini-marca-menor.marca { font-size: clamp(2rem, 4.2vw, 2.7rem); }
.ini-topo-marca.marca { font-size: 1.45rem; }

/* Slogan abaixo do logotipo */
.ini-centro .ini-marca { margin-bottom: 16px; }
.ini-slogan { margin: 0 0 26px; color: var(--cinza); font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 500; letter-spacing: -.005em; text-align: center; }

/* Botão Teste grátis */
.ini-acao-teste { padding: 11px 26px; border-radius: 999px; border-color: transparent; background: #2f8f3a; color: #fff; font-size: .95rem; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(47, 143, 58, .7); }
.ini-acao-teste:hover { background: #267a30; border-color: transparent; color: #fff; box-shadow: 0 6px 16px -6px rgba(47, 143, 58, .8); }

/* Modal do teste grátis (3 etapas) */
.teste .modal-body { padding-top: 30px; }
.teste h2 { margin-top: 4px; }
.teste-passos { display: flex; justify-content: center; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; font-size: .78rem; color: #9aa0a6; }
.teste-passos li { display: flex; align-items: center; gap: 6px; }
.teste-passos li + li::before { content: ""; width: 26px; height: 2px; margin-right: 4px; border-radius: 2px; background: #e0e3e7; }
.teste-passos span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f1f3f4; color: #5f6368; font-weight: 700; font-size: .72rem; }
.teste-passos li.is-atual { color: var(--texto); font-weight: 600; }
.teste-passos li.is-atual span { background: var(--azul-medio); color: #fff; }
.teste-passos li.is-feito span { background: #2f8f3a; color: #fff; }
.teste-campo { margin-bottom: 10px; }
.teste-campo input { letter-spacing: .04em; font-weight: 600; }
.teste-msg { min-height: 0; margin-bottom: 12px; font-size: .85rem; }
.teste-msg.is-erro { color: #b42318; }
.teste-dados { margin: 0 0 20px; padding: 14px 16px; border: 1px solid #e8eaed; border-radius: 12px; background: #fafbfc; text-align: left; }
.teste-dados > div { display: flex; gap: 12px; padding: 5px 0; }
.teste-dados > div + div { border-top: 1px dashed #e8eaed; }
.teste-dados dt { flex: 0 0 120px; color: var(--cinza); font-size: .78rem; font-weight: 600; }
.teste-dados dd { margin: 0; color: var(--texto); font-size: .86rem; font-weight: 500; word-break: break-word; }
.teste-selo { padding: 1px 8px; border-radius: 99px; font-size: .74rem; font-weight: 600; }
.teste-selo.is-ok { background: #e3f4ec; color: #05603a; }
.teste-selo.is-aviso { background: #fff4e5; color: #93370d; }
.teste-regras { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .78rem; color: #80868b; }
.teste-regras li.ok { color: #1e7a34; }
.teste .btn-link { color: var(--cinza); font-size: .86rem; text-decoration: none; }
.teste .btn-link:hover { color: var(--texto); text-decoration: underline; }
.teste .btn-primary { background: var(--azul-medio); border-color: var(--azul-medio); border-radius: 10px; padding: 11px; font-weight: 600; }
.teste .btn-primary:hover, .teste .btn-primary:focus { background: var(--azul); border-color: var(--azul); }
.teste .btn-primary:disabled { background: #9aa6b8; border-color: #9aa6b8; }

/* Itens do menu que abrem modais (Cadastrar / Área do cliente) */
.ini-menu-botao { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
button.ini-botao { border: 0; font: inherit; font-weight: 600; cursor: pointer; }

/* Chamada do teste grátis: azul da marca com o detalhe verde da seta do logotipo */
.ini-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 30px; }
.ini-cta-botao { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 28px 0 8px; border: 0; border-radius: 999px; background: #0f2a4f; color: #fff;
    font-size: 1rem; font-weight: 600; letter-spacing: -.005em; box-shadow: 0 12px 24px -14px rgba(15, 42, 79, .9); transition: background .15s, transform .15s, box-shadow .15s; }
.ini-cta-botao:hover { background: #1b4178; transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(15, 42, 79, .9); }
.ini-cta-botao:active { transform: none; }
.ini-cta-botao:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(27, 65, 120, .25); }
.ini-cta-icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #3aa23a; color: #fff; font-size: 1.05rem; transition: transform .2s; }
.ini-cta-botao:hover .ini-cta-icone { transform: translateY(2px); }
.ini-cta-nota { display: inline-flex; align-items: center; gap: 6px; color: var(--cinza); font-size: .82rem; }
.ini-cta-nota .bi { color: #3aa23a; font-size: 1rem; }
/* Destaques discretos abaixo */
.ini-selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 44px 0 0; padding: 0; list-style: none; color: #80868b; font-size: .8rem; }
.ini-selos li { display: inline-flex; align-items: center; gap: 7px; }
.ini-selos .bi { color: #1b4178; opacity: .7; }
@media (max-width: 575.98px) { .ini-selos { flex-direction: column; align-items: center; gap: 6px; margin-top: 32px; } }
/* Celular: menu do topo numa linha só (Planos some até existir) */
.ini-menu-item, .ini-botao { white-space: nowrap; }
@media (max-width: 575.98px) {
    .ini-menu { gap: 14px; }
    .ini-menu .is-breve { display: none; }
    .ini-botao { padding: 8px 16px; }
}