/* ==========================================================================
   NEXT PRO — COMPONENTES
   ========================================================================== */

/* ---------- Container / Section ---------- */
.np-container {
  width: 100%;
  max-width: var(--np-container-max);
  margin-inline: auto;
  padding-inline: var(--np-container-pad);
}
.np-section { padding-block: var(--np-space-24); }
.np-section--tight { padding-block: var(--np-space-16); }
.np-section--dark { background: var(--np-dark-800); color: var(--np-white); }
.np-section--surface { background: var(--np-gray-050); }

/* ---------- Botões ---------- */
.np-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--np-space-2);
  font-family: var(--np-font-body);
  font-weight: 600;
  font-size: var(--np-fs-base);
  line-height: 1;
  padding: 0.9rem 1.5rem;
  border-radius: var(--np-radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--np-duration-fast) var(--np-ease),
              background var(--np-duration-fast) var(--np-ease),
              box-shadow var(--np-duration-fast) var(--np-ease);
  white-space: nowrap;
}
.np-btn:active { transform: translateY(1px); }

.np-btn--primary {
  background: var(--np-green);
  color: var(--np-dark-800);
}
.np-btn--primary:hover {
  background: var(--np-green-600);
  color: var(--np-dark-800);
  box-shadow: var(--np-shadow-glow-green);
}

.np-btn--outline-dark {
  background: transparent;
  border-color: var(--np-dark);
  color: var(--np-dark);
}
.np-btn--outline-dark:hover { background: var(--np-dark); color: var(--np-white); }

.np-btn--outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: var(--np-white);
}
.np-btn--outline-light:hover { border-color: var(--np-white); background: rgba(255,255,255,0.08); }

.np-btn--whatsapp {
  background: #25D366;
  color: #0a1f14;
}
.np-btn--whatsapp:hover { background: #1ebe5a; }

.np-btn--sm { padding: 0.6rem 1.1rem; font-size: var(--np-fs-sm); }

/* ---------- Badge ---------- */
.np-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--np-space-1);
  font-size: var(--np-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--np-radius-full);
  background: var(--np-green-100);
  color: var(--np-green-700);
}
.np-badge--dark { background: rgba(255,255,255,0.1); color: var(--np-white); }
.np-badge--outline { background: transparent; border: 1px solid var(--np-gray-300); color: var(--np-dark-600); }
.np-badge--pendente { background: #fff4e0; color: #8a5a12; }

/* ---------- Card ---------- */
.np-card {
  background: var(--np-white);
  border: var(--np-border);
  border-radius: var(--np-radius-lg);
  padding: var(--np-space-8);
  transition: transform var(--np-duration-base) var(--np-ease), box-shadow var(--np-duration-base) var(--np-ease), border-color var(--np-duration-base) var(--np-ease);
}
.np-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--np-shadow-md);
  border-color: var(--np-green);
}

/* ---------- Product Card ---------- */
.np-product-card {
  display: flex;
  flex-direction: column;
  background: var(--np-white);
  border: var(--np-border);
  border-radius: var(--np-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--np-duration-base) var(--np-ease), transform var(--np-duration-base) var(--np-ease);
}
.np-product-card:hover { box-shadow: var(--np-shadow-lg); transform: translateY(-4px); }
.np-product-card__media {
  aspect-ratio: 4 / 3;
  background: var(--np-gray-050);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.np-product-card__body { padding: var(--np-space-6); display: flex; flex-direction: column; gap: var(--np-space-2); flex: 1; }
.np-product-card__line { font-family: var(--np-font-mono); font-size: var(--np-fs-xs); color: var(--np-green-700); text-transform: uppercase; letter-spacing: .08em; }
.np-product-card__name { font-family: var(--np-font-display); font-size: var(--np-fs-xl); margin: 0; }
.np-product-card__specs { display: flex; gap: var(--np-space-4); font-size: var(--np-fs-sm); color: var(--np-dark-400); margin-top: auto; padding-top: var(--np-space-3); border-top: var(--np-border); }

/* ---------- Grid utilitário ---------- */
.np-grid { display: grid; gap: var(--np-grid-gap); }
.np-grid--2 { grid-template-columns: repeat(1, 1fr); }
.np-grid--3 { grid-template-columns: repeat(1, 1fr); }
.np-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .np-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .np-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .np-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .np-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .np-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Nav / Header ---------- */
.np-header {
  position: sticky;
  top: 0;
  z-index: var(--np-z-header);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--np-border);
}
.np-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--np-space-6);
  padding-block: var(--np-space-3);
}
.np-header__logo img { height: 34px; width: auto; }
.np-nav { display: none; }
.np-nav__list { display: flex; align-items: center; gap: var(--np-space-6); list-style: none; margin: 0; padding: 0; }
.np-nav__list > li { position: relative; }
.np-nav__link {
  font-weight: 600;
  font-size: var(--np-fs-sm);
  color: var(--np-dark);
  padding: var(--np-space-2) 0;
}
.np-nav__link:hover { color: var(--np-green-700); }
.np-header__cta { display: none; align-items: center; gap: var(--np-space-3); }
.np-header__toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: var(--np-border);
  border-radius: var(--np-radius-md);
  background: transparent;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .np-nav { display: block; }
  .np-header__cta { display: flex; }
  .np-header__toggle { display: none; }
}

/* Submenu (dropdown de Produtos) */
.np-nav__submenu {
  display: none;
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: var(--np-white);
  border: var(--np-border);
  border-radius: var(--np-radius-md);
  box-shadow: var(--np-shadow-lg);
  padding: var(--np-space-2);
  margin-top: var(--np-space-4);
}
.np-nav__list > li:hover .np-nav__submenu,
.np-nav__list > li:focus-within .np-nav__submenu { display: block; }
.np-nav__submenu a {
  display: block;
  padding: var(--np-space-2) var(--np-space-3);
  border-radius: var(--np-radius-sm);
  color: var(--np-dark);
  font-size: var(--np-fs-sm);
}
.np-nav__submenu a:hover { background: var(--np-green-050); color: var(--np-green-700); }

/* Menu mobile (off-canvas) */
.np-mobile-nav {
  position: fixed; inset: 0;
  background: var(--np-white);
  z-index: var(--np-z-modal);
  padding: var(--np-space-6);
  transform: translateX(100%);
  transition: transform var(--np-duration-base) var(--np-ease);
  overflow-y: auto;
}
.np-mobile-nav.is-open { transform: translateX(0); }
@media (min-width: 1024px) { .np-mobile-nav { display: none; } }

/* ---------- WhatsApp CTA flutuante ---------- */
.np-whatsapp-float {
  position: fixed;
  right: var(--np-space-6);
  bottom: var(--np-space-6);
  z-index: var(--np-z-header);
  box-shadow: var(--np-shadow-lg);
}

/* ---------- Footer ---------- */
.np-footer { background: var(--np-dark-800); color: rgba(255,255,255,0.75); }
.np-footer a { color: rgba(255,255,255,0.85); }
.np-footer a:hover { color: var(--np-green); }
.np-footer__grid { display: grid; gap: var(--np-space-8); grid-template-columns: 1fr; padding-block: var(--np-space-16); }
@media (min-width: 768px) { .np-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); } }
.np-footer__title { font-family: var(--np-font-mono); font-size: var(--np-fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--np-white); margin-bottom: var(--np-space-3); }
.np-footer__bottom {
  border-top: var(--np-border-dark);
  padding-block: var(--np-space-4);
  display: flex; flex-wrap: wrap; gap: var(--np-space-3);
  align-items: center; justify-content: space-between;
  font-size: var(--np-fs-xs);
}

/* ---------- Breadcrumb ---------- */
.np-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--np-space-2); font-size: var(--np-fs-sm); color: var(--np-dark-400); list-style: none; padding: 0; }
.np-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--np-space-2); color: var(--np-gray-300); }

/* Ficha tecnica: estilo unificado em pages.css (.np-spec-grid / .np-specs). */

/* Breadcrumbs do Joomla ------------------------------------------------------
   O modulo mod_breadcrumbs sai com as classes .mod-breadcrumbs/.breadcrumb, que
   nao existiam neste CSS - por isso a trilha aparecia como lista numerada sem
   estilo. Aqui as classes do Joomla recebem a mesma aparencia de .np-breadcrumb. */
.mod-breadcrumbs,
ol.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-space-2);
    font-size: var(--np-fs-sm);
    color: var(--np-dark-400);
    list-style: none;
    margin: 0;
    padding: 0;
}

.mod-breadcrumbs li:not(:last-child)::after,
ol.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: var(--np-space-2);
    color: var(--np-gray-300);
}

/* "Voce esta aqui:" e o divisor proprio do Joomla nao entram no desenho. */
.mod-breadcrumbs__here,
.mod-breadcrumbs__divider,
.breadcrumb .divider {
    display: none;
}

.mod-breadcrumbs a,
ol.breadcrumb a {
    color: var(--np-green-700);
    text-decoration: none;
}

.mod-breadcrumbs a:hover,
ol.breadcrumb a:hover {
    text-decoration: underline;
}

/* Botões sobre a faixa verde -------------------------------------------------
   A faixa verde é o único fundo do sistema em que o botão primário (verde)
   desaparece. Aqui ele vira sólido escuro, mantendo a hierarquia de ação. */
.np-band--green .np-btn--primary {
    background: var(--np-dark-800);
    color: var(--np-white);
}

.np-band--green .np-btn--primary:hover {
    background: var(--np-dark);
    color: var(--np-white);
    box-shadow: none;
}

/* Faixa de evento (Semanáudio) -----------------------------------------------
   Identidade do evento — preto com laranja — dentro da estrutura da banda
   escura do site. O laranja entra por --evento-laranja, definido no módulo,
   para não contaminar os tokens da marca Next Pro. */
.np-evento {
    display: grid;
    gap: var(--np-space-6);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .np-evento { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--np-space-8); }
}

.np-evento__marca img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
}

.np-evento__dados {
    list-style: none;
    padding: 0;
    margin: var(--np-space-6) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-space-3) var(--np-space-6);
    font-weight: 600;
}

.np-evento__dados li {
    padding-left: var(--np-space-3);
    border-left: 3px solid var(--evento-laranja, #f08020);
    color: var(--np-white);
}

.np-evento__btn {
    background: var(--evento-laranja, #f08020);
    color: var(--np-dark-800);
    border-color: var(--evento-laranja, #f08020);
}

.np-evento__btn:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--np-dark-800);
}

/* Módulos dentro de grid ------------------------------------------------------
   O Joomla envolve o conteúdo de cada módulo num <div class="mod-custom">,
   mesmo com style="none". Dentro de um .np-grid isso vira um único filho, e
   todos os cards caem na mesma célula — o motivo de as caixas aparecerem
   empilhadas em vez de lado a lado. display:contents remove o invólucro do
   fluxo do grid, sem mexer no HTML dos módulos. */
.np-grid > .mod-custom,
.np-destaques > .mod-custom {
    display: contents;
}

/* Menu principal vindo do mod_menu do Joomla ---------------------------------
   O template foi desenhado para .np-nav__list / .np-nav__link, mas o módulo de
   menu do Joomla gera .mod-menu com <ul> aninhado. Aqui a marcação do Joomla
   recebe exatamente o mesmo desenho, sem precisar de override de layout. */
.np-nav .mod-menu {
    display: flex;
    align-items: center;
    gap: var(--np-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* nomes de item nunca quebram linha - era o que deixava a barra alta e torta */
.np-nav .mod-menu > li > a { white-space: nowrap; }

@media (min-width: 1280px) {
    .np-nav .mod-menu { gap: var(--np-space-6); }
}

.np-nav .mod-menu > li { position: relative; }

.np-nav .mod-menu > li > a,
.np-nav .mod-menu > li > span {
    display: inline-block;
    font-weight: 600;
    font-size: var(--np-fs-xs);
    letter-spacing: .01em;
    color: var(--np-dark);
    padding: var(--np-space-2) 0;
}

@media (min-width: 1280px) {
    .np-nav .mod-menu > li > a,
    .np-nav .mod-menu > li > span { font-size: var(--np-fs-sm); }
}

.np-nav .mod-menu > li > a:hover,
.np-nav .mod-menu > li.active > a { color: var(--np-green-700); }

/* item com filhos ganha a setinha */
.np-nav .mod-menu > li.parent > a::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
}

/* submenu */
.np-nav .mod-menu > li > ul {
    display: none;
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    max-height: min(60vh, 460px);
    overflow-y: auto;
    background: var(--np-white);
    border: var(--np-border);
    border-radius: var(--np-radius-md);
    box-shadow: var(--np-shadow-lg);
    padding: var(--np-space-2);
    margin-top: var(--np-space-4);
    list-style: none;
    z-index: 60;
}

/* Ponte invisível sobre o vão do margin-top: sem ela, descer o mouse até o
   submenu faz sair do <li> e o menu fecha antes de dar para clicar. */
.np-nav .mod-menu > li > ul::before {
    content: "";
    position: absolute;
    top: calc(var(--np-space-4) * -1);
    left: 0;
    right: 0;
    height: var(--np-space-4);
}

/* Abre por hover, por teclado, ou fixado com clique no botão de seta. */
.np-nav .mod-menu > li:hover > ul,
.np-nav .mod-menu > li:focus-within > ul,
.np-nav .mod-menu > li.is-aberto > ul { display: block; }



.np-nav .mod-menu > li > ul a {
    display: block;
    padding: var(--np-space-2) var(--np-space-3);
    border-radius: var(--np-radius-sm);
    color: var(--np-dark);
    font-size: var(--np-fs-sm);
    white-space: nowrap;
}

.np-nav .mod-menu > li > ul a:hover { background: var(--np-green-050); color: var(--np-green-700); }

/* mesma lista no menu mobile: empilhada e sem dropdown */
.np-mobile-nav .mod-menu,
.np-mobile-nav .mod-menu ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.np-mobile-nav .mod-menu > li > a {
    display: block;
    padding: var(--np-space-3) 0;
    font-weight: 600;
    font-size: var(--np-fs-lg);
    color: var(--np-dark);
    border-bottom: 1px solid var(--np-gray-100);
}

.np-mobile-nav .mod-menu ul { padding-left: var(--np-space-4); }

.np-mobile-nav .mod-menu ul a {
    display: block;
    padding: var(--np-space-2) 0;
    font-size: var(--np-fs-sm);
    color: var(--np-text-muted);
}

/* Contagem regressiva do evento */
.np-evento__contagem {
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-space-6);
    margin-top: var(--np-space-6);
    align-items: baseline;
}

.np-evento__contagem span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 4.5ch;
    font-size: var(--np-fs-sm);
    color: rgba(255, 255, 255, .7);
}

.np-evento__contagem strong {
    display: block;
    font-size: var(--np-fs-3xl);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--evento-laranja, #f08020);
}

/* Cabeçalho: logo e botões nunca encolhem -------------------------------------
   Com o menu principal populado (10 itens) o flex espremia o logo até largura
   zero. Logo e CTA passam a ter largura fixa; quem cede espaço é a navegação. */
.np-header__logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.np-header__cta { flex: 0 0 auto; }

/* Com 10 itens de primeiro nível, menu + logo + 2 botões não cabem numa linha.
   No desktop a navegação ganha a linha de baixo, ocupando a largura inteira. */
@media (min-width: 1024px) {
    .np-header__bar { flex-wrap: wrap; }

    .np-nav {
        display: flex;
        order: 3;
        flex: 1 0 100%;
        justify-content: center;
        border-top: 1px solid var(--np-gray-100);
        padding-top: var(--np-space-2);
        margin-top: var(--np-space-2);
    }

    .np-nav .mod-menu { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 1439px) {
    .np-header__bar { gap: var(--np-space-4); }
}

/* Lightbox de fotos de produto ------------------------------------------------
   Equivalente ao Fancybox do site antigo: a foto abre grande sobre fundo
   escurecido, sem moldura nem cartão em volta. */
.np-zoom { cursor: zoom-in; transition: transform .25s ease, opacity .25s ease; }
.np-gallery__item:hover .np-zoom { transform: scale(1.04); }
.np-zoom:focus-visible { outline: 2px solid var(--np-green); outline-offset: 3px; }

.np-sem-rolagem { overflow: hidden; }

.np-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--np-space-4), 4vw, var(--np-space-12));
  background: rgba(10, 12, 11, .92);
  backdrop-filter: blur(6px);
}
.np-lightbox.is-aberto { display: flex; }

.np-lightbox__img {
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Sem fundo, sem borda, sem cartão: só a foto. */
  background: none;
  border: 0;
  border-radius: 0;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .55));
  animation: np-lightbox-entrada .28s ease both;
}
@keyframes np-lightbox-entrada {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.np-lightbox__fechar,
.np-lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease;
}
.np-lightbox__fechar:hover,
.np-lightbox__nav:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); }
.np-lightbox__fechar:focus-visible,
.np-lightbox__nav:focus-visible { outline: 2px solid var(--np-green); outline-offset: 2px; }

.np-lightbox__fechar {
  top: var(--np-space-4);
  right: var(--np-space-4);
  width: 44px; height: 44px;
  font-size: 26px;
}
.np-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  font-size: 30px;
  padding-bottom: 4px;
}
.np-lightbox__nav--ant  { left: var(--np-space-4); }
.np-lightbox__nav--prox { right: var(--np-space-4); }
.np-lightbox--sozinha .np-lightbox__nav { display: none; }

.np-lightbox__rodape {
  position: absolute;
  left: 0; right: 0; bottom: var(--np-space-4);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--np-space-4);
  padding: 0 var(--np-space-16);
  font-size: var(--np-fs-sm);
  color: rgba(255, 255, 255, .72);
  text-align: center;
}
.np-lightbox__contador { font-family: var(--np-font-mono); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .np-lightbox__nav { width: 40px; height: 40px; font-size: 24px; }
  .np-lightbox__rodape { padding: 0 var(--np-space-4); flex-direction: column; gap: var(--np-space-1); }
}

@media (prefers-reduced-motion: reduce) {
  .np-zoom, .np-lightbox__img { transition: none; animation: none; }
  .np-gallery__item:hover .np-zoom { transform: none; }
}

/* Trabalhe conosco -------------------------------------------------------------
   Faixa entre as colunas do rodapé e a linha de copyright. */
.np-carreiras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--np-space-6);
  padding-block: var(--np-space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.np-carreiras__chamada {
  margin: 0;
  font-size: var(--np-fs-lg);
  color: var(--np-white);
  text-wrap: balance;
}
.np-carreiras__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-space-3);
}
.np-carreiras__link {
  display: inline-flex;
  align-items: center;
  gap: var(--np-space-2);
  padding: var(--np-space-3) var(--np-space-6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--np-radius-full);
  font-size: var(--np-fs-sm);
  line-height: 1;
  white-space: nowrap;
  transition: background var(--np-duration-base) var(--np-ease),
              border-color var(--np-duration-base) var(--np-ease),
              color var(--np-duration-base) var(--np-ease);
}
.np-carreiras__link svg { flex: 0 0 auto; }
.np-carreiras__link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--np-green);
  color: var(--np-green);
}
.np-carreiras__link:focus-visible { outline: 2px solid var(--np-green); outline-offset: 3px; }

@media (max-width: 640px) {
  .np-carreiras { flex-direction: column; align-items: flex-start; }
  .np-carreiras__acoes { width: 100%; }
  .np-carreiras__link { flex: 1 1 auto; justify-content: center; }
}

/* Formulários do visForms -------------------------------------------------------
   O visForms emite marcação Bootstrap (.row / .col-*), que este template não
   carrega. Aqui a grade é neutralizada e os campos ganham o visual do site. */
.visforms {
  max-width: 42rem;
  margin-inline: auto;
  padding-block: var(--np-space-8);
}
.visforms .row,
.visforms [class*="col-"] {
  display: block;
  width: 100%;
  max-width: none;
  flex: none;
  margin: 0;
  padding: 0;
}
.visforms .form-group { margin-bottom: var(--np-space-6); }

.visforms .vis_mandatory {
  font-size: var(--np-fs-sm);
  color: var(--np-dark-400);
  margin-bottom: var(--np-space-6);
}

.visforms label {
  display: block;
  margin-bottom: var(--np-space-2);
  font-size: var(--np-fs-sm);
  font-weight: 600;
  color: var(--np-dark);
}

.visforms input[type="text"],
.visforms input[type="email"],
.visforms input[type="tel"],
.visforms input[type="number"],
.visforms input[type="url"],
.visforms input[type="date"],
.visforms input[type="file"],
.visforms textarea,
.visforms select {
  display: block;
  width: 100%;
  padding: var(--np-space-3) var(--np-space-4);
  font-family: inherit;
  font-size: var(--np-fs-base);
  color: var(--np-dark);
  background: var(--np-white);
  border: var(--np-border);
  border-radius: var(--np-radius-md);
  transition: border-color var(--np-duration-base) var(--np-ease),
              box-shadow var(--np-duration-base) var(--np-ease);
}
.visforms textarea { min-height: 9rem; resize: vertical; }
.visforms input:focus,
.visforms textarea:focus,
.visforms select:focus {
  outline: none;
  border-color: var(--np-green);
  box-shadow: 0 0 0 3px rgba(25, 216, 152, .18);
}
.visforms input[type="file"] { padding: var(--np-space-3); background: var(--np-gray-50, #fafafa); }

/* Checkbox de aceite: caixa ao lado do texto, não em cima. */
.visforms .form-check,
.visforms input[type="checkbox"] + label,
.visforms label.form-check-label {
  display: inline-block;
  font-weight: 400;
  margin-bottom: 0;
}
.visforms input[type="checkbox"] {
  width: auto;
  margin-right: var(--np-space-2);
  accent-color: var(--np-green);
}

/* Asterisco de obrigatório no acento do site. */
.visforms .asterix,
.visforms .star,
.visforms .required-asterix { color: var(--np-green); }

/* Botões: enviar vira botão primário; limpar fica discreto. */
.visforms input[type="submit"],
.visforms button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--np-space-3) var(--np-space-8);
  border: 0;
  border-radius: var(--np-radius-full);
  background: var(--np-green);
  color: var(--np-dark);
  font-family: inherit;
  font-size: var(--np-fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--np-duration-base) var(--np-ease),
              box-shadow var(--np-duration-base) var(--np-ease);
}
.visforms input[type="submit"]:hover,
.visforms button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(25, 216, 152, .32);
}
.visforms input[type="reset"],
.visforms button[type="reset"] {
  padding: var(--np-space-3) var(--np-space-6);
  margin-right: var(--np-space-3);
  border: var(--np-border);
  border-radius: var(--np-radius-full);
  background: transparent;
  color: var(--np-dark-400);
  font-family: inherit;
  font-size: var(--np-fs-sm);
  cursor: pointer;
}
.visforms input[type="reset"]:hover { color: var(--np-dark); }

/* Mensagens de erro do próprio visForms. */
.visforms .invalid,
.visforms .visError,
.visforms .error { color: #bf1722; font-size: var(--np-fs-sm); }
.visforms input.invalid,
.visforms textarea.invalid,
.visforms select.invalid { border-color: #bf1722; }


/* --------------------------------------------------------------------------
   MARCA DE TECNOLOGIA (cards da home: MultiFLEX e PFC)
   Nome tratado como assinatura, em corpo grande, para chamar a atencao.
   -------------------------------------------------------------------------- */
.np-tec-marca {
  font-family: var(--np-font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--np-dark);
  margin: 0 0 var(--np-space-4);
  text-transform: none;
}
.np-tec-marca em { font-style: normal; color: var(--np-green-700); }
.np-band--dark .np-tec-marca { color: var(--np-white); }
.np-band--dark .np-tec-marca em { color: var(--np-green); }


/* --------------------------------------------------------------------------
   CALCULADORA DE BITOLA (linha de tensao constante)
   -------------------------------------------------------------------------- */
.np-calc__grupo { margin-bottom: var(--np-space-8); }
.np-calc__grupo > h3 { margin: 0 0 var(--np-space-4); }

.np-calc__modelo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--np-space-4);
  padding: var(--np-space-4) 0;
  border-top: 1px solid var(--np-gray-200);
}
@media (min-width: 640px) {
  .np-calc__modelo { grid-template-columns: 1.2fr 1fr 1fr; align-items: end; }
}
.np-calc__modelo > span { font-weight: 600; }

.np-calc__campo { display: flex; flex-direction: column; gap: var(--np-space-2); }
.np-calc__campo label { font-size: 0.875rem; color: var(--np-dark-400); }
.np-calc__campo input {
  font-family: var(--np-font-mono);
  font-size: 1rem;
  padding: var(--np-space-3) var(--np-space-4);
  border: var(--np-border);
  border-radius: var(--np-radius-md);
  background: var(--np-white);
  color: var(--np-dark);
  width: 100%;
}
.np-calc__campo input:focus-visible { outline: 2px solid var(--np-green); outline-offset: 2px; }

.np-calc__saidas { display: grid; grid-template-columns: 1fr; gap: var(--np-space-6); }
@media (min-width: 900px) { .np-calc__saidas { grid-template-columns: 1fr 1fr; } }

.np-calc__coluna {
  border: var(--np-border);
  border-radius: var(--np-radius-lg);
  padding: var(--np-space-6);
  background: var(--np-white);
}
.np-calc__coluna > h3 { margin: 0 0 var(--np-space-2); }
.np-calc__coluna > p.np-muted { margin: 0 0 var(--np-space-6); }

.np-calc__destaque {
  font-family: var(--np-font-display);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--np-green-700);
  margin: 0;
}
.np-calc__destaque + p { margin: var(--np-space-2) 0 var(--np-space-6); }

.np-calc__linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--np-space-4);
  padding: var(--np-space-3) 0;
  border-top: 1px solid var(--np-gray-200);
}
.np-calc__linha > span:last-child { font-weight: 600; text-align: right; }

.np-bitola-escolhida { background: var(--np-green-100); font-weight: 600; }


/* --------------------------------------------------------------------------
   VALORES EM PALAVRAS (bloco institucional da home)
   -------------------------------------------------------------------------- */
.np-valores ul {
  list-style: none;
  margin: var(--np-space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-space-3);
}
.np-valores li {
  font-family: var(--np-font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  padding: var(--np-space-3) var(--np-space-6);
  border: var(--np-border);
  border-radius: 999px;
  background: var(--np-white);
  color: var(--np-dark);
}
.np-band--dark .np-valores li,
.np-section--dark .np-valores li {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--np-white);
}


/* ==========================================================================
   Ícones sociais do rodapé — os links vêm do módulo "Next Pro — footer-contato"
   ========================================================================== */
.np-social{list-style:none;padding:0;margin:1.25rem 0 0;display:flex;flex-wrap:wrap;gap:.625rem}
.np-social li{margin:0}
.np-social__link{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;
  border:1px solid rgba(255,255,255,.18);color:#fff;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
}
.np-social__link span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.np-social__link::before{
  content:"";width:19px;height:19px;background:currentColor;
  -webkit-mask:var(--np-ico) center/contain no-repeat;
  mask:var(--np-ico) center/contain no-repeat;
}
.np-social__link:hover,.np-social__link:focus-visible{
  background:var(--np-green);border-color:var(--np-green);color:#0d3d2b;transform:translateY(-2px)
}
.np-social--instagram{--np-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.16c3.2%200%203.58.01%204.85.07%201.17.05%201.8.25%202.23.41.56.22.96.48%201.38.9.42.42.68.82.9%201.38.16.42.36%201.06.41%202.23.06%201.27.07%201.65.07%204.85s-.01%203.58-.07%204.85c-.05%201.17-.25%201.8-.41%202.23-.22.56-.48.96-.9%201.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17%2015.58%202.16%2015.2%202.16%2012s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68%201.38-.9.42-.16%201.06-.36%202.23-.41C8.42%202.17%208.8%202.16%2012%202.16Zm0%203.68a6.16%206.16%200%201%200%200%2012.32%206.16%206.16%200%200%200%200-12.32Zm0%2010.16a4%204%200%201%201%200-8%204%204%200%200%201%200%208Zm7.85-10.4a1.44%201.44%200%201%201-2.88%200%201.44%201.44%200%200%201%202.88%200Z%22%2F%3E%3C%2Fsvg%3E")}
.np-social--youtube{--np-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M23.5%206.9a3.02%203.02%200%200%200-2.12-2.14C19.5%204.25%2012%204.25%2012%204.25s-7.5%200-9.38.51A3.02%203.02%200%200%200%20.5%206.9C0%208.79%200%2012%200%2012s0%203.21.5%205.1a3.02%203.02%200%200%200%202.12%202.14c1.88.51%209.38.51%209.38.51s7.5%200%209.38-.51a3.02%203.02%200%200%200%202.12-2.14C24%2015.21%2024%2012%2024%2012s0-3.21-.5-5.1ZM9.6%2015.57V8.43L15.82%2012%209.6%2015.57Z%22%2F%3E%3C%2Fsvg%3E")}
.np-social--facebook{--np-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M24%2012.07C24%205.4%2018.63%200%2012%200S0%205.4%200%2012.07C0%2018.1%204.39%2023.09%2010.13%2024v-8.44H7.08v-3.49h3.05V9.41c0-3.02%201.79-4.69%204.53-4.69%201.31%200%202.69.24%202.69.24v2.96h-1.51c-1.49%200-1.96.93-1.96%201.89v2.26h3.33l-.53%203.49h-2.8V24C19.61%2023.09%2024%2018.1%2024%2012.07Z%22%2F%3E%3C%2Fsvg%3E")}
.np-social--linkedin{--np-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.45%2020.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86%200-2.14%201.45-2.14%202.94v5.67H9.35V9h3.41v1.56h.05a3.74%203.74%200%200%201%203.37-1.85c3.6%200%204.27%202.37%204.27%205.46v6.28ZM5.34%207.43a2.07%202.07%200%201%201%200-4.14%202.07%202.07%200%200%201%200%204.14ZM7.12%2020.45H3.55V9h3.57v11.45ZM22.22%200H1.77C.79%200%200%20.77%200%201.72v20.56C0%2023.23.79%2024%201.77%2024h20.45c.98%200%201.78-.77%201.78-1.72V1.72C24%20.77%2023.2%200%2022.22%200Z%22%2F%3E%3C%2Fsvg%3E")}


/* ==========================================================================
   Bloco de lançamento (home) — módulo "Lançamento Nano SPK"
   ========================================================================== */
.np-lanc{position:relative;overflow:hidden;background-color:#0d3d2b;background-image:linear-gradient(100deg, rgba(8,32,24,.94) 0%, rgba(8,32,24,.72) 48%, rgba(8,32,24,.35) 100%), url("../images/fundo-nextpro-verde.webp");background-size:cover;background-position:center;color:#fff;padding:clamp(2.5rem,6vw,5rem) 0}
.np-lanc__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.np-lanc__grid{grid-template-columns:1.05fr .95fr}}
.np-lanc__selo{display:inline-flex;align-items:center;gap:.5rem;background:var(--np-green);color:#08201a;font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .8rem;border-radius:999px}
.np-lanc__pulse{width:8px;height:8px;border-radius:50%;background:#08201a;animation:npPulse 1.8s ease-in-out infinite}
@keyframes npPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.np-lanc__titulo{font-family:var(--np-font-display);font-size:clamp(2.25rem,5.2vw,4rem);line-height:1.05;margin:1.1rem 0 0;font-weight:700;color:#fff}
.np-lanc__titulo em{font-style:normal;color:var(--np-green)}
.np-lanc__linha{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.55;margin:1.1rem 0 0;color:rgba(255,255,255,.86);max-width:46ch}
.np-lanc__data{display:block;margin-top:1.5rem;font-size:.95rem;color:rgba(255,255,255,.92);border-left:3px solid var(--np-green);padding-left:.85rem}
.np-lanc__acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.np-lanc__specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:2.25rem;max-width:640px}
@media (min-width:600px){.np-lanc__specs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.np-lanc__spec{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.75rem .85rem}
.np-lanc__spec b{display:block;font-size:1rem;line-height:1.2;font-weight:700;white-space:nowrap}
.np-lanc__spec span{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.2rem}
.np-lanc__midia{position:relative;display:flex;justify-content:center}
.np-lanc__midia::after{content:"";position:absolute;inset:6% 6% 4%;border-radius:50%;background:radial-gradient(closest-side, rgba(25,216,152,.38), rgba(25,216,152,0) 72%);filter:blur(26px);z-index:0}
.np-lanc__midia img{position:relative;z-index:1;width:min(100%,520px);height:auto;filter:drop-shadow(0 26px 42px rgba(0,0,0,.45))}
.np-lanc__nota{margin-top:1.25rem;font-size:.78rem;color:rgba(255,255,255,.55)}

.np-lanc__selo::before{content:"";width:8px;height:8px;border-radius:50%;background:#08201a;animation:npPulse 1.8s ease-in-out infinite}
.np-lanc__spec-n{display:block;font-size:1rem;line-height:1.2;font-weight:700;white-space:nowrap;color:#fff}
.np-lanc__spec-l{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.2rem}
.np-lanc__texto{min-width:0}

.np-social__txt{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Item de menu sem link (Cabeçalho, ex.: Conheça): mesma seta e mesmo comportamento dos demais */
.np-nav .mod-menu > li.parent > span::after{content:"";display:inline-block;margin-left:6px;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.np-nav .mod-menu > li.parent > span{cursor:default;user-select:none}
.np-nav .mod-menu > li.parent:hover > span,.np-nav .mod-menu > li.parent.is-aberto > span{color:var(--np-green-700)}