/* Ajustes mínimos sobre o template — sem novos componentes visuais. */

/* Paleta NoLapis (menu ERP / site atual) — substitui azul+rosa do 5gapps */
:root {
  --nl-brand: #552e4c;
  --nl-brand-mid: #9b414e;
  --nl-accent: #e46353;
  --nl-brand-dark: #3e2841;
  --nl-brand-deep: #2a1525;
  --nl-gradient: linear-gradient(105deg, #552e4c 0%, #9b414e 48%, #e46353 100%);
  --nl-gradient-hero: linear-gradient(110deg, #2a1525 0%, #3e2841 22%, #552e4c 48%, #9b414e 78%, #e46353 100%);
  --thm-base: var(--nl-accent);
  --thm-color: var(--nl-brand);
  --thm-color2: var(--nl-brand-mid) !important;
  --line-bg: var(--nl-gradient);
}

.nl-site-logo {
  height: 48px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.atf-site-header .nl-site-logo {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
.nl-site-logo--footer {
  height: 48px;
}

/* Hero: gradiente oval + fundo grey-bg-6 no corte */
.nl-hero-oval.atf-cover-bg::before,
.home-2.atf-cover-bg::before {
  background: var(--nl-gradient-hero) !important;
  border-radius: 0% 0% 50% 50% / 0% 0% 100% 100%;
  transform: scaleX(1.7);
  bottom: auto;
  height: 92%;
}

.nl-hero-oval {
  overflow: hidden;
  background-color: var(--atf-grey-6);
}

/* Pessoa + balões clipados na oval (mesmo shape do gradiente) */
.nl-hero-visual {
  position: absolute;
  left: -35%;
  right: -35%;
  top: 0;
  height: 92%;
  z-index: 1;
  overflow: hidden;
  border-radius: 0% 0% 50% 50% / 0% 0% 100% 100%;
  pointer-events: none;
}

.nl-hero-content-wrap {
  position: relative;
  z-index: 3;
}

.hero-frame.nl-hero-pessoa {
  position: absolute;
  inset: 0;
  box-shadow: none;
  background: transparent;
  display: block;
}
.hero-frame.nl-hero-pessoa img {
  position: absolute;
  width: auto;
  height: 600px;
  max-height: 90%;
  object-fit: contain;
  object-position: bottom center;
  bottom: -2%;
  right: 30%;
  left: auto;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.28));
}
@media (min-width: 1400px) {
  .hero-frame.nl-hero-pessoa img {
    height: 660px;
    right: 31%;
  }
}

/* Balões em diamante ao redor dela */
.nl-hero-balloons {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  z-index: 2;
}
.nl-hero-balloon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  background: rgba(42, 21, 37, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.nl-hero-balloon__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  font-size: 13px;
}
/* Posições em % do container largo (-35%…+35%): right maior = mais à esquerda na tela */
.nl-hero-balloon--1 {
  top: 18%;
  right: 41%;
  animation: nl-float-a 9s ease-in-out infinite;
}
.nl-hero-balloon--2 {
  top: 20%;
  right: 28%;
  animation: nl-float-b 10s ease-in-out infinite;
}
.nl-hero-balloon--3 {
  top: 36%;
  right: 44%;
  animation: nl-float-c 8.5s ease-in-out infinite;
}
.nl-hero-balloon--4 {
  top: 40%;
  right: 27%;
  animation: nl-float-a 11s ease-in-out infinite reverse;
}

@keyframes nl-float-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(4px, -9px, 0); }
  70% { transform: translate3d(-3px, -5px, 0); }
}
@keyframes nl-float-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-5px, -10px, 0); }
}
@keyframes nl-float-c {
  0%, 100% { transform: translate3d(0, 0, 0); }
  40% { transform: translate3d(3px, -8px, 0); }
  75% { transform: translate3d(-4px, -3px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nl-hero-balloon {
    animation: none;
  }
}

/* Demais fundos com gradiente do template */
.atf-cover-bg:not(.home-2)::before,
.home-1.atf-cover-bg::before,
.line-bg-2,
.atf-team-content,
.atf-faq-accordion .card .card-header button {
  background: var(--nl-gradient) !important;
}

.atf-faq-accordion .card .card-header button {
  font-size: 15px;
}

/* Antes e depois — seção mais wide (sai do container padrão de 1320px) */
.nl-antes-depois .container {
  max-width: 1560px;
}

/* Antes e depois — vídeo em destaque (texto + player), inspirado em cases B2B */
.nl-text-accent {
  color: var(--nl-accent);
}
.nl-video-showcase {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3.5rem;
  align-items: center;
}
/* Igual a .atf-section-title .title (ex.: “Sair do improviso…”) */
.nl-video-showcase__text .atf-section-title .title {
  font-size: 50px;
  letter-spacing: -2px;
  line-height: 1.2;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  only screen and (min-width: 576px) and (max-width: 767px) {
  .nl-video-showcase__text .atf-section-title .title {
    font-size: 36px;
    letter-spacing: 0;
  }
}
@media screen and (min-width: 320px) and (max-width: 575px) {
  .nl-video-showcase__text .atf-section-title .title {
    font-size: 28px;
    letter-spacing: 0;
    line-height: 1.3;
  }
}
.nl-video-showcase__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 1.5rem 0 1.75rem;
  padding-left: 1rem;
  border-left: 3px solid var(--nl-accent);
}
.nl-video-showcase__stat strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--thm-black, #1d2645);
}
.nl-video-showcase__stat span {
  font-size: 0.9rem;
  color: #67748e;
}
.nl-video-showcase__media {
  min-width: 0;
}
.nl-video-player {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  box-shadow: 0 28px 54px -28px rgba(42, 21, 37, 0.4);
}
.nl-video-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nl-video-player::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 20, 0.05) 0%, rgba(20, 10, 20, 0.35) 100%);
  pointer-events: none;
}
.nl-video-player__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--nl-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 12px 26px -8px rgba(20, 10, 20, 0.5);
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 1;
}
.nl-video-player:hover .nl-video-player__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}
.nl-video-player__badge {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(20, 10, 20, 0.55);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 1;
}
.nl-video-player__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.nl-video-player.is-playing {
  cursor: default;
}
@media (max-width: 991px) {
  .nl-video-showcase {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Home #bpo — mesmo layout; só o fundo mais dark no tom da marca (sem preto) */
.nl-bpo-dark {
  background: linear-gradient(110deg, #2a1525 0%, #3e2841 40%, #552e4c 100%) !important;
}
.nl-bpo-dark .atf-section-title .sub-title {
  color: #ffb4a8 !important;
  background: none !important;
  -webkit-text-fill-color: #ffb4a8;
}
.nl-bpo-dark .atf-section-title .title {
  color: #f5ebe8 !important;
}
.nl-bpo-dark .describtion,
.nl-bpo-dark .atf-section-title p {
  color: rgba(245, 235, 232, 0.82) !important;
}
.nl-bpo-dark ul.listing-style li {
  color: #f5ebe8 !important;
}
.nl-bpo-dark ul.listing-style li::before {
  color: #e36352 !important;
}
.nl-bpo-dark .atf-themes-btn {
  background: #e36352 !important;
  color: #fff !important;
}
.nl-bpo-dark .atf-themes-btn:hover {
  color: #fff !important;
  filter: brightness(1.06);
}
.nl-bpo-dark .payment_thumb_v2 {
  background: linear-gradient(135deg, rgba(42, 21, 37, 0.35) 0%, rgba(228, 99, 83, 0.25) 100%);
}
.nl-bpo-dark .payment-2 {
  border-top-color: transparent;
  border-left-color: transparent;
}

/* Abas ativas (Antes e depois) */
.nav-tabs .nav-item .nav-link.active {
  background: var(--nl-gradient) !important;
}

/* Faixa de módulos (Clientes, Cobrança, Caixa…) */
.atf-brand-content {
  background-image: var(--nl-gradient) !important;
}

/* Linha decorativa sob títulos */
.animated-line,
.animated-line::before {
  background-image: var(--nl-gradient) !important;
}

/* Botões do hero (borda colorida) */
.atf-one__btn {
  border-color: rgba(228, 99, 83, 0.55) !important;
}
.atf-one__btn:hover {
  border-color: var(--nl-accent) !important;
}

.nl-legal-body h2,
.nl-legal-body h3 {
  margin: 1.5rem 0 .75rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.nl-legal-body h2:first-child,
.nl-legal-body h3:first-child {
  margin-top: 0;
}
.nl-legal-body ul,
.nl-legal-body ol {
  margin: 0 0 1rem 1.2rem;
}
.nl-legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: .95rem;
}
.nl-legal-body th,
.nl-legal-body td {
  border: 1px solid #eee;
  padding: .65rem .75rem;
  vertical-align: top;
}
.nl-legal-body th {
  background: #f7f7fb;
}

.form-message {
  min-height: 1.2em;
}
.form-message.success {
  color: #065f46;
}
.form-message.error {
  color: #991b1b;
}

.atf-nav-list > li > a.active {
  opacity: 1;
}

.consent-row {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  text-align: left;
  font-size: .9rem;
  margin: .75rem 0 1rem;
}
.consent-row input {
  margin-top: .25rem;
}
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.nl-planos-wrap {
  margin-top: 2rem;
}

/* Hero e títulos — uma linha em telas médias+ */
@media (min-width: 768px) {
  .nl-hero-title {
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    line-height: 1.12;
    max-width: 18ch;
  }
  .nl-title-one-line {
    white-space: nowrap;
  }
}

/* Abas verticais — espaço entre botões (Antes e Depois) */
.atf-visitor-nav-list .nav.nav-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border: none !important;
}
.atf-visitor-nav-list .nav-tabs .nav-item {
  width: 100%;
  margin: 0;
}
.atf-visitor-nav-list .nav-tabs .nav-link {
  width: 100%;
  margin-bottom: 0 !important;
}

.atf-hamburger-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.atf-hamburger-social-links a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5%;
  background: #847d7d;
  color: #fff;
}

/* Header — Entrar + Painel BPO + CTA */
.nl-header-actions {
  gap: 8px;
}
.nl-header-actions .atf-themes-btn {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.nl-btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: none;
}
.nl-btn-ghost:hover,
.nl-btn-ghost:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
.nl-btn-ghost-on-dark {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: none;
}
.nl-btn-ghost-on-dark:hover,
.nl-btn-ghost-on-dark:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* Sobre — time humano (foto + chips flutuantes) */
.nl-team-human__visual {
  position: relative;
  margin: 0 auto;
  max-width: 640px;
  padding: 2.5rem 1rem 1rem;
}
.nl-team-human__glow {
  position: absolute;
  inset: 12% 8% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(85, 46, 76, 0.14), transparent 68%);
  pointer-events: none;
}
.nl-team-human__photo {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  height: auto;
  border-radius: 1rem;
  position: relative;
  z-index: 1;
}
.nl-team-human__chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--thm-black, #272727);
  white-space: nowrap;
}
.nl-team-human__chip i {
  color: var(--nl-brand);
  font-size: 1rem;
}
.nl-team-human__chip--top-left {
  top: 8%;
  left: 0;
}
.nl-team-human__chip--bottom-left {
  bottom: 12%;
  left: -2%;
}
.nl-team-human__chip--top-right {
  top: 14%;
  right: -2%;
}
.nl-team-human__chip--bottom-right {
  bottom: 8%;
  right: 0;
}
@media (max-width: 991px) {
  .nl-team-human__chip {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0.35rem;
    white-space: normal;
  }
  .nl-team-human__visual {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    padding-top: 1rem;
  }
  .nl-team-human__photo {
    margin-bottom: 0.75rem;
  }
}