/*
 * Central NST - landing no traco a mao (08/10/2026)
 * Nova System Tecnologias - Ismaire Zicardi, Especialista de Processos.
 *
 * Camada so de visual, carregada depois do CSS do index.php. Tudo o que o painel
 * (site/config_landpage.php) grava continua valendo: cores, fundos, imagens, alinhamento
 * e botoes vem no style de cada bloco e ganham desta folha. Aqui so entram linhas serias
 * (grade, cartoes, tipografia) e alguns tracos a mao (grifo, moldura, rabiscos, setas).
 * Desenhos: loja/assets/traco/*.svg (gerador: bin/landing_traco.py).
 */
:root {
    --primary: #1D4ED8;
    --nst-navy: #0B1F3A;
    --nst-navy-2: #16325C;
    --nst-azul: #1D4ED8;
    --nst-ambar: #F59E0B;
    --nst-laranja: #E8572A;
    --nst-linha: #E2E8F0;
    --nst-mao: 'Caveat', 'Segoe Print', cursive;
}

body { color: #1E293B; }
h1, h2, h3, h4, h5 { letter-spacing: -0.01em; }

/* ── barra de navegacao: limpa, com logo e marca ─────────────────────────── */
.navbar { padding: 10px 0; box-shadow: none; border-bottom: 1px solid var(--nst-linha); }
.navbar.shadow-sm { box-shadow: 0 6px 24px rgba(11, 31, 58, .08) !important; }
.navbar-brand { display: inline-flex; align-items: center; gap: 10px; }
.nst-marca { display: inline-flex; flex-direction: column; line-height: 1; }
.nst-marca b { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--nst-navy); letter-spacing: .04em; }
.nst-marca i { font-family: var(--nst-mao); font-style: normal; font-weight: 700; font-size: 1.15rem; color: var(--nst-ambar); margin-top: 1px; }
.nav-link { position: relative; }
.nav-link::after {
    content: ""; position: absolute; left: 10%; right: 10%; bottom: -2px; height: 8px;
    background: url("../../loja/assets/traco/grifo.svg") no-repeat center / 100% 100%;
    opacity: 0; transform: scaleX(.4); transition: .25s ease;
}
.nav-link:hover::after { opacity: 1; transform: scaleX(1); }
.btn-login-nav { background-color: var(--nst-navy); box-shadow: 0 4px 12px rgba(11, 31, 58, .25); }
.btn-login-nav:hover { background-color: var(--nst-azul); color: #fff; }
.btn-central-nav { border-radius: 50px; padding: 6px 22px; font-weight: 700; color: var(--nst-navy); background: #fff; border: 2px solid var(--nst-navy); }
.btn-central-nav:hover, .btn-central-nav:focus { background: var(--nst-navy); color: #fff; border-color: var(--nst-navy); }
.btn-central-nav i { margin-right: 4px; }

/* ── topo (hero) ────────────────────────────────────────────────────────── */
.hero {
    background-image: url("../../loja/assets/traco/rabiscos.svg");
    background-size: 900px auto; background-repeat: repeat;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    position: relative;
}
.hero-title { text-shadow: none; line-height: 1.12; }
.hero-title::after {
    content: ""; display: block; width: min(320px, 60%); height: 20px; margin-top: 10px;
    background: url("../../loja/assets/traco/grifo.svg") no-repeat left center / contain;
}
.text-center .hero-title::after { margin-left: auto; margin-right: auto; background-position: center; }
.text-end .hero-title::after { margin-left: auto; background-position: right; }
.hero .btn { transition: transform .2s ease, box-shadow .2s ease; }
.hero .btn:hover { transform: translateY(-2px); }
/* desenho do topo: so no computador e so com o texto a esquerda (alinhamento "start") */
.hero-desenho { display: none; }
@media (min-width: 992px) {
    .hero-com-desenho .col-lg-10 { flex: 0 0 auto; width: 58%; }
    .hero-com-desenho .hero-desenho {
        display: block; position: absolute; right: 2%; top: 50%; transform: translateY(-46%);
        width: min(40%, 520px); pointer-events: none;
    }
    .hero-com-desenho .hero-desenho img { width: 100%; height: auto; }
}

/* ── titulos de secao: grifo a mao embaixo ──────────────────────────────── */
.section-padding h2, .nst-cta h2, #sistemas h2, #academy h2 { position: relative; }
.section-padding h2::after, .nst-cta h2::after, #sistemas .text-center h2::after {
    content: ""; display: block; width: 150px; height: 14px; margin-top: 10px;
    background: url("../../loja/assets/traco/grifo.svg") no-repeat left center / contain;
}
.section-padding .text-center h2::after, .nst-cta.text-center h2::after, #sistemas .text-center h2::after {
    margin-left: auto; margin-right: auto; background-position: center;
}
.section-padding .text-end h2::after { margin-left: auto; background-position: right; }
.section-title p { max-width: 680px; margin-left: auto; margin-right: auto; color: #475569; }

/* ── cartoes "O que fazemos": linha seria + moldura a mao no hover ──────── */
.service-card {
    position: relative; border-radius: 18px; padding: 26px 22px;
    border: 1px solid var(--nst-linha); border-bottom-width: 4px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .05);
}
.service-card::after {
    content: ""; position: absolute; inset: -7px; pointer-events: none;
    border: 2px solid var(--nst-navy);
    border-radius: 22px 14px 24px 12px / 14px 24px 12px 22px;
    opacity: 0; transform: rotate(-.8deg) scale(.98); transition: .25s ease;
}
.service-card:hover { transform: translateY(-6px); }
.service-card:hover::after { opacity: .55; transform: rotate(-.8deg) scale(1); }
.service-img { max-height: none; width: 100%; height: 150px; object-fit: contain; margin-bottom: 16px; }
.service-title { font-size: 1.12rem; }
.service-text { line-height: 1.55; }

/* ── "Quem somos": imagem sem sombra quando for desenho ─────────────────── */
.img-fluid-rounded[src$=".svg"], .nst-svg.img-fluid-rounded { box-shadow: none; border-radius: 0; background: transparent; }

/* desenho trocado por SVG dentro da pagina (assets/landing/nst-traco.js) */
.nst-svg { display: block; }
.nst-svg svg { display: block; width: 100%; height: 100%; }
.service-img.nst-svg { margin-left: auto; margin-right: auto; }
.img-fluid-rounded.nst-svg svg { height: auto; }

/* ── faixa de chamada (cta) e faixas azul-marinho ───────────────────────── */
.nst-cta { background-image: url("../../loja/assets/traco/rabiscos.svg"); background-size: 900px auto; background-repeat: repeat; padding-top: 4rem !important; padding-bottom: 4rem !important; }
.nst-cta .btn::after {
    content: ""; display: inline-block; width: 26px; height: 14px; margin-left: 10px; vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cpath d='M1 8 Q9 5 17 7 T24 6 M18 1 L24 6 L18 12' fill='none' stroke='%23E8572A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── blocos de HTML que vem do banco (ids do campo "Ref." do painel) ─────── */
/* faixa de numeros: valor em letra manuscrita */
#prova .col-md-4 > div:first-child { font-family: var(--nst-mao); font-size: 2.3rem !important; line-height: 1.05; }
#prova .col-md-4 + .col-md-4 { border-left: 1px dashed #CBD5E1; }
@media (max-width: 767px) { #prova .col-md-4 + .col-md-4 { border-left: 0; border-top: 1px dashed #CBD5E1; padding-top: 12px; } }
/* cartoes dos sistemas: mesma moldura a mao */
#sistemas .row > [class*="col-"] > div { position: relative; border: 1px solid var(--nst-linha); transition: transform .2s ease; }
#sistemas .row > [class*="col-"] > div::after {
    content: ""; position: absolute; inset: -6px; pointer-events: none; border: 2px solid var(--nst-navy);
    border-radius: 20px 12px 22px 12px / 12px 22px 12px 20px; opacity: 0; transform: rotate(.7deg); transition: .25s ease;
}
#sistemas .row > [class*="col-"] > div:hover { transform: translateY(-4px); }
#sistemas .row > [class*="col-"] > div:hover::after { opacity: .5; }
/* Academy: rabiscos no cartao e selo "EM BREVE" torto, como adesivo */
#academy .container > div { position: relative; overflow: hidden; }
#academy .container > div::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: url("../../loja/assets/traco/rabiscos.svg") repeat right top / 700px auto;
}
#academy .container > div > .row { position: relative; }
#academy span[style*="border-radius"] { transform: rotate(-2.5deg); box-shadow: 2px 3px 0 rgba(0, 0, 0, .18); }

/* ── formulario de contato ──────────────────────────────────────────────── */
#contato .form-control { border-radius: 12px; }
#contato .form-control:focus { box-shadow: 0 0 0 .2rem rgba(29, 78, 216, .15); }

/* ── rodape: risco a mao no topo ────────────────────────────────────────── */
footer { position: relative; }
footer::before {
    content: ""; position: absolute; left: 50%; top: 26px; width: 180px; height: 14px; transform: translateX(-50%);
    background: url("../../loja/assets/traco/grifo.svg") no-repeat center / contain; opacity: .8;
}
footer h5 { font-family: var(--nst-mao); font-weight: 700; font-size: 1.5rem; color: var(--nst-ambar); }
footer .contact-item { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; color: rgba(255, 255, 255, .8); }
footer .contact-item a { color: inherit; text-decoration: none; }
footer .contact-item a:hover, .footer-link:hover { color: #fff; }

/* ── botao de voltar ao topo ────────────────────────────────────────────── */
#btn-back-to-top { background: var(--nst-navy); }
#btn-back-to-top:hover { background: var(--nst-azul); }

/* ── janela "Area do Cliente" (botao do menu) ──────────────────────────── */
.nst-area .modal-content { border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(11, 31, 58, .35); }
.nst-area-topo {
    position: relative; padding: 28px 32px 26px; color: #fff; text-align: center;
    background: url("../../loja/assets/traco/rabiscos.svg") repeat 0 0 / 700px auto, linear-gradient(135deg, var(--nst-navy-2) 0%, var(--nst-navy) 75%);
}
.nst-area-topo .btn-close { position: absolute; top: 16px; right: 16px; opacity: .85; }
.nst-area-selo {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: var(--nst-ambar);
    color: var(--nst-navy); font-weight: 800; font-size: .74rem; letter-spacing: .06em; transform: rotate(-2deg); box-shadow: 2px 3px 0 rgba(0, 0, 0, .18);
}
.nst-area-topo h4 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.55rem; margin: 14px 0 4px; }
.nst-area-topo h4::after {
    content: ""; display: block; width: 140px; height: 13px; margin: 6px auto 0;
    background: url("../../loja/assets/traco/grifo.svg") no-repeat center / contain;
}
.nst-area-topo p { margin: 6px 0 0; color: rgba(255, 255, 255, .8); }
.nst-area-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 26px 28px 30px; background: #F8FAFC; }
.nst-area-opcao {
    position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--nst-linha); border-radius: 18px;
    overflow: hidden; text-decoration: none; color: var(--nst-navy); box-shadow: 0 6px 20px rgba(11, 31, 58, .07); transition: transform .2s ease;
}
.nst-area-opcao::after {
    content: ""; position: absolute; inset: -6px; pointer-events: none; border: 2px solid var(--nst-ambar);
    border-radius: 22px 14px 24px 12px / 14px 24px 12px 22px; opacity: 0; transform: rotate(-.7deg); transition: .25s ease;
}
.nst-area-opcao:hover { transform: translateY(-4px); color: var(--nst-navy); }
.nst-area-opcao:hover::after { opacity: .9; }
.nst-area-opcao .arte { display: block; background: linear-gradient(135deg, var(--nst-navy-2), var(--nst-navy)); padding: 14px 24px 10px; }
.nst-area-opcao .arte img { display: block; width: 100%; height: 130px; object-fit: contain; }
.nst-area-opcao .txt { display: block; padding: 18px 22px 6px; text-align: center; }
.nst-area-opcao .txt strong { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.2rem; margin-bottom: 6px; }
.nst-area-opcao .txt span { display: block; color: #475569; font-size: .92rem; line-height: 1.5; }
.nst-area-btn {
    align-self: center; margin: 12px 0 22px; padding: 10px 26px; border-radius: 999px; background: var(--nst-navy); color: #fff;
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .9rem;
}
.nst-area-btn.ambar { background: var(--nst-ambar); color: var(--nst-navy); }
.nst-area-opcao:hover .nst-area-btn { background: var(--nst-azul); color: #fff; }
@media (max-width: 575.98px) { .nst-area-opcoes { grid-template-columns: 1fr; padding: 18px; } .nst-area-opcao .arte img { height: 100px; } }
.nst-sem-grifo .nst-area-topo h4::after, .nst-sem-molduras .nst-area-opcao::after { display: none; }
.nst-sem-rabiscos .nst-area-topo { background: linear-gradient(135deg, var(--nst-navy-2) 0%, var(--nst-navy) 75%); }

/* ── interruptores do painel (Config. Site > Visual): classes no <body> ─── */
.nst-sem-grifo .hero-title::after, .nst-sem-grifo .section-padding h2::after, .nst-sem-grifo .nst-cta h2::after,
.nst-sem-grifo #sistemas .text-center h2::after, .nst-sem-grifo .nav-link::after, .nst-sem-grifo footer::before { display: none; }
.nst-sem-rabiscos .hero, .nst-sem-rabiscos .nst-cta { background-image: none; }
.nst-sem-rabiscos #academy .container > div::before { display: none; }
.nst-sem-manuscrito #prova .col-md-4 > div:first-child { font-family: 'Montserrat', sans-serif; font-size: 1.6rem !important; }
.nst-sem-manuscrito footer h5, .nst-sem-manuscrito .nst-marca i { font-family: 'Montserrat', sans-serif; font-size: 1rem; }
.nst-sem-molduras .service-card::after, .nst-sem-molduras #sistemas .row > [class*="col-"] > div::after { display: none; }
.nst-sem-molduras .service-card:hover, .nst-sem-molduras #sistemas .row > [class*="col-"] > div:hover { transform: none; }

/* ── quem pede menos movimento no sistema ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .service-card, .service-card::after, .nav-link::after, #sistemas .row > [class*="col-"] > div, .hero .btn { transition: none !important; }
    .service-card:hover, #sistemas .row > [class*="col-"] > div:hover { transform: none; }
}

/* ── fundo vivo do topo: malha de tracos (17/10/2026, #1071; assets/landing/nst-fundo-vivo.js) ── */
.hero.nst-malha-on { background-image: none; }
.hero .nst-malha { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hero.nst-malha-on > .container, .hero.nst-malha-on .hero-desenho { position: relative; z-index: 1; }
@media (min-width: 992px) { .hero-com-desenho.nst-malha-on .hero-desenho { position: absolute; } }
.nst-som-btn {
    position: absolute; z-index: 2; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(8% + 16px);
    width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; padding: 0;
    color: #fff; background: rgba(11,31,58,.55); border: 1.5px solid rgba(255,255,255,.35); cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.nst-som-btn svg { width: 20px; height: 20px; }
.nst-som-btn:hover, .nst-som-btn:focus-visible { border-color: #F59E0B; color: #F59E0B; outline: none; }
.nst-som-btn[aria-pressed="true"] { color: rgba(255,255,255,.6); }
/* no celular os botoes do topo ocupam a largura: o alto-falante ganha uma faixa propria embaixo deles */
@media (max-width: 991px) { .hero.nst-com-som > .container { padding-bottom: 64px; } }