/* ============================================================
   legacy-content.css - Estilos modernizados para as classes de
   CONTEUDO das paginas legadas rodando sob o next2026.master.
   (Substitui o que essas paginas usavam do nextsoftware.css.)
   Encolher/remover conforme as paginas forem redesenhadas.
   ============================================================ */

/* ---- Utilitarios genericos ---- */
.center { position: relative; width: 100%; text-align: center; margin: 0 auto; }
.mg-t-b { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.bg-light2 { background: var(--nx-bg-alt); }
.bg-quarternary, .bg-fifth { background: transparent; }
.no-gutters { --bs-gutter-x: 0; }
.wb { word-break: break-word; }

/* ---- Titulos de secao legados ---- */
.home-heading-content h1, .home-heading-content h2, .main_title h2 {
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
    letter-spacing: -.02em;
    color: var(--nx-text);
    font-family: var(--nx-font) !important;
}
.home-heading-content p, .main_title p { color: var(--nx-text-muted); }
.section { padding: var(--nx-section-gap) 0; }

/* ---- Hero das paginas legadas (segmentos/funcionalidades) ---- */
.section_gap {
    padding: clamp(3rem, 6vw, 5rem) 0;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
}
.section_gap h1 {
    font-family: var(--nx-font);
    font-weight: 800;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--nx-text);
    margin-bottom: 1rem;
}
.section_gap h2 {
    font-family: var(--nx-font);
    font-weight: 600;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.5;
    color: var(--nx-text-soft);
    margin-top: 1rem;
}
.section_gap h3 {
    font-family: var(--nx-font);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--nx-text-soft);
    margin-top: 1rem;
}
.section_gap_top { padding-top: var(--nx-section-gap); padding-bottom: var(--nx-section-gap); }

/* ---- Formulario de teste no hero dos segmentos ---- */
.register_form {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(6px);
    text-align: center;
    padding: 28px 24px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow);
}
.register_form h3 { font-size: 1.25rem; font-weight: 800 !important; color: var(--nx-text) !important; text-shadow: none !important; margin: 0; }
.register_form p { color: var(--nx-text-muted) !important; }
.register_form .form-control { margin-bottom: 10px; border-radius: 10px; padding: .65rem .9rem; }
.register_form .g-recaptcha { display: flex; justify-content: center; }
.register_form .btn.btn-success {
    background: var(--nx-accent);
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    padding: .6rem 1.6rem;
    margin-top: 1rem !important;
}
.register_form span[style*="color"] { font-size: .85rem; }

/* ---- Icones de destaque (about-icon2 com fa) ---- */
.about-icon2 { padding: 10px 0; }
.about-icon2 span.fa, .about-icon2 span[class^="fa"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    font-size: 28px;
    color: var(--nx-primary);
    background: var(--nx-primary-soft);
    border-radius: 16px;
}
.about-icon2 img { width: 56px; height: 56px; object-fit: contain; }
.about-text h3 { font-size: 1.05rem; font-weight: 700; margin-top: 8px; }
.about-text p { color: var(--nx-text-muted); font-size: .92rem; }

/* ---- Blocos next-explore (texto + imagem) ---- */
.next-explore h2 {
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    letter-spacing: -.02em;
    margin: 0 0 1rem 0 !important;
}
.next-explore img { border-radius: var(--nx-radius); border: 1px solid var(--nx-border); box-shadow: var(--nx-shadow-sm); }
.next-explore p { color: var(--nx-text-soft); }

/* ---- Slider 3D antigo (slider-net): mostra so a primeira imagem ---- */
.slider-net span, .slider-net2 span { display: none; }
.slider-net span:first-child, .slider-net2 span:first-child { display: block; }
.slider-net img, .slider-net2 img { border-radius: var(--nx-radius); box-shadow: var(--nx-shadow); }

/* ---- Menu de pills lateral do template antigo (tinha margens negativas) ---- */
.next-main .nav-pills, .next-main .nav-stacked {
    margin-top: 0 !important;
    transform: none !important;
    gap: 4px;
}
.next-main .nav-pills .nav-link {
    text-align: left;
    font-weight: 600;
    color: var(--nx-text-soft);
    border-radius: 10px;
    width: 100%;
}
.next-main .nav-pills .nav-link:hover { background: var(--nx-primary-soft); color: var(--nx-primary-dark); }
.next-main .nav-pills li.active .nav-link, .next-main .nav-pills .nav-link.active { background: var(--nx-primary); color: #fff; }
.next-main .tab-content {
    background: #fff;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-sm);
    padding: clamp(1rem, 2.5vw, 1.8rem);
}
.next-main .tab-content h4 { font-size: 1.02rem; font-weight: 700; margin-top: 12px; }
.next-main .tab-content p { color: var(--nx-text-muted); font-size: .94rem; }

/* ---- Toggle de planos legado (tinha width/margem/scale inline) ---- */
.plan-nav {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 auto 26px !important;
    transform: none !important;
    background: #fff !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: 999px !important;
    padding: 5px !important;
    gap: 4px;
    font-size: 1rem !important;
    float: none !important;
}
.col-md-12 > .plan-nav { display: inline-flex !important; }
.plan-nav .nav-link, .plan-nav a {
    border-radius: 999px !important;
    font-weight: 700;
    color: var(--nx-text-soft) !important;
    padding: .5rem 1.3rem !important;
    background: transparent !important;
}
.plan-nav li.active a, .plan-nav .nav-link.active {
    background: var(--nx-primary) !important;
    color: #fff !important;
}
.col-md-12:has(> .plan-nav) { text-align: center; }

/* ---- Cards de plano "snip" (tinham margens/larguras fixas inline) ---- */
.snip1214 {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: 0 auto 26px !important;
    width: 100% !important;
    float: none !important;
}
.snip1214 > div { flex: 0 0 auto; }
.snip1214 .plan.snip2 {
    width: 240px !important;
    background: #fff;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-sm);
    padding: 16px;
    text-align: center;
}

/* ---- Depoimentos legados (usavam owl-carousel, removido) ---- */
.testi_slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.testi_slider .testi_item .row { align-items: center; }
.testimonial_area { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.testimonial_area .section-title h3 {
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    line-height: 1.2 !important;
    font-family: var(--nx-font) !important;
    font-weight: 800;
}
.testimonial_area .section-title p { font-size: 1.05rem !important; }

/* ---- Titulos e paragrafos com font-size inline gigante do template antigo ---- */
h2.home-heading-content[style], .home-heading-content h2[style], h2[style*="font-size: 5rem"], h2[style*="font-size: 4rem"], h2[style*="font-size: 60px"], h2[style*="font-size: 55px"], h2[style*="font-size: 50px"], h2[style*="font-size: 45px"], h2[style*="font-size: 40px"], h1[style*="font-size: 55px"], h1[style*="font-size: 50px"], h1[style*="font-size: 45px"], h3[style*="font-size: 55px"], h3[style*="font-size: 50px"], h3[style*="font-size: 45px"] {
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    text-shadow: none !important;
    line-height: 1.25 !important;
    font-family: var(--nx-font) !important;
}
section p[style*="font-size: 2rem"], .mg-t-b p[style*="font-size: 2rem"], p[style*="font-size: 25px"], p[style*="font-size: 20px"] {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
}

/* ---- Contadores (#counter) ---- */
#counter { justify-content: center; text-align: center; transform: none !important; }
#counter .cnt, #counter .fact-item { font-size: 2rem; font-weight: 800; color: var(--nx-primary); }

/* ---- Grade de 5 produtos (#col5) ---- */
#col5 { display: flex !important; flex-wrap: wrap; justify-content: center; }
#col5 > .col-md-2 { flex: 1 1 200px; max-width: 260px; }

/* ---- Botoes legados -> visual novo ---- */
.btn-blue, .btn12, .btn-12, .button.btn, .dropbtn, .btn-price, .check-email {
    display: inline-block;
    background: var(--nx-primary);
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    border: 0;
    border-radius: 999px;
    padding: .55rem 1.4rem;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
    cursor: pointer;
}
.btn-blue:hover, .btn12:hover, .btn-12:hover, .button.btn:hover, .dropbtn:hover, .btn-price:hover {
    background: var(--nx-primary-dark);
    transform: translateY(-1px);
    color: #fff !important;
}
.btn12.bg-success, .btn-12.bg-success, .btn.bg-success, .button.btn-success, .btn-blue.bg-success {
    background: var(--nx-accent) !important;
}
.btn12.bg-success:hover, .btn-12.bg-success:hover, .btn.bg-success:hover, .button.btn-success:hover {
    background: var(--nx-accent-dark) !important;
}
.btn12 span, .btn-12 span { color: inherit; }

/* ---- Galerias de telas (telas.aspx / next_erp_telas.aspx) ---- */
.telas { float: left; width: 33.33%; padding: 14px; transition: .3s; }
.telas4 { float: left; width: 25%; padding: 10px; transition: .3s; }
.telasC, .telas4C {
    background: #fff;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow-sm);
    padding: 16px;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.telasC:hover, .telas4C:hover { transform: translateY(-4px); box-shadow: var(--nx-shadow); }
.telas4C { min-height: 380px; }
.telasC img, .telas4C img { border-radius: var(--nx-radius-sm); max-width: 100%; height: auto; }
@media (max-width: 991.98px) {
    .telas, .telas4 { width: 50%; }
}
@media (max-width: 599.98px) {
    .telas, .telas4 { width: 100%; }
    .telas4C { min-height: auto; }
}

/* ---- Cards de servicos/funcionalidades ---- */
.services {
    background: #fff;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    margin-bottom: 20px;
}
.services .icon span, .services .icon i { font-size: 46px !important; color: var(--nx-primary) !important; }
.services h3 { font-size: 1.05rem; font-weight: 700; margin-top: 10px; }
.services p { color: var(--nx-text-muted); font-size: .93rem; }

/* ---- Single feature (CTAs em secoes escuras) ---- */
.single_feature {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--nx-radius);
    padding: 26px 20px;
    margin-bottom: 20px;
    text-align: center;
    color: #eaf2f9;
}
.single_feature .icon span { font-size: 2rem; color: #7fd0ff; }
.single_feature h4 { color: #fff; font-weight: 700; }
.single_feature p { color: #c3d6e6; }

/* ---- Depoimentos legados ---- */
.testi_item { padding: 10px; }
.testi_text {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--nx-radius);
    padding: 22px;
}
.testi_text a, .testi_text p { color: inherit; }

/* ---- Videos ---- */
.video_item {
    background: #fff;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    overflow: hidden;
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    padding: 10px;
}
.video_item iframe { max-width: 100%; border: 0; }

/* ---- Circulos de produto ---- */
.circle img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--nx-primary-soft);
}

/* ---- Precos legados (paginas de edicao) ---- */
.pricing-table {
    background: #fff;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-sm);
    padding: 24px 18px;
    margin-bottom: 24px;
}
.pricing-table .plan { font-weight: 800; font-size: 1.2rem; display: block; }
.pricing-table .value { font-size: 2rem; font-weight: 800; display: block; margin: 8px 0; }
.pricing-table .value small { font-size: 1rem; color: var(--nx-text-muted); }
.price-border ul { list-style: none; padding: 0; margin: 0; }
.price-border ul li { padding: 6px 0; border-bottom: 1px solid var(--nx-bg-alt); font-size: .92rem; color: var(--nx-text-soft); }
.price-border ul li .fa { color: var(--nx-accent); margin-right: 8px; }
.tag-pop {
    text-align: center;
    color: #fff;
    font-weight: 700;
    background: var(--nx-primary);
    padding: 5px 14px;
    font-size: .78rem;
    border-radius: 999px;
    display: table;
    margin: 0 auto 10px;
}
.plan.snip2 {
    background: #fff;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    padding: 14px;
    text-align: center;
}
.plan-title { font-weight: 800; font-size: 1.05rem; background: var(--nx-primary); color: #fff; border-radius: 8px; padding: 6px; }
.plan-cost { margin: 8px 0; display: block; }
.plan-price { font-weight: 800; font-size: 1.5rem; }
.plan-type { color: var(--nx-text-muted); font-size: .85rem; }
.plan-select a {
    display: inline-block;
    background: var(--nx-accent);
    color: #fff;
    border-radius: 999px;
    padding: .4rem 1.2rem;
    font-weight: 700;
}
.ilimitado, .usuarios, .cnpj {
    background: var(--nx-primary-soft);
    color: var(--nx-primary-dark);
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 700;
    padding: 2px 8px;
}

/* ---- Tooltip simples (icones i.tooltips com data-tooltip) ---- */
.tooltips { position: relative; cursor: help; }
.tooltips:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 125%;
    transform: translateX(-50%);
    background: var(--nx-text);
    color: #fff;
    font-size: .78rem;
    font-weight: 400;
    padding: 8px 10px;
    border-radius: 8px;
    width: 240px;
    z-index: 50;
    text-align: left;
}

/* ---- Formulario de contato legado ---- */
.leave-comments-area, .contact.mid-contain .leave-comments-area {
    background: #fff;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    max-width: 860px;
    margin: 40px auto;
}
.leave-comments-area h4 { font-weight: 800; margin-bottom: 18px; }
.leave-comments-area .form-control { border-radius: 10px; padding: .65rem .9rem; margin-bottom: 4px; }
.contatos p { margin-bottom: 8px; }
#gmap_canvas img { max-width: none !important; background: none !important; }

/* ---- Icones about (usados em passos/contadores legados) ---- */
.about-icon2 img { width: 64px; height: 64px; object-fit: contain; }
.about-text h3 { font-size: 1.05rem; font-weight: 700; }

/* ---- Ajustes de imagem em conteudo legado ---- */
.next-explore img, .tab-content img { max-width: 100%; height: auto; }