/* =============================================
   NewPDV Brand Theme Override
   Paleta oficial: Azul + Verde NewPDV
   ============================================= */

:root {
  /* Cores primárias NewPDV */
  --theme-color:   #368DA8;
  --theme-color3:  #045F7A;

  /* Backgrounds escuros */
  --dark-color:    #045F7A;
  --dark-color2:   #033d4f;
  --dark-color3:   #045F7A;
  --dark-color4:   #022a36;

  /* Texto */
  --gray-color:    #5DA6BD;
  --gray-color2:   #5DA6BD;

  /* Overlays e tints */
  --bs-bg-color1:  var(--theme-color);
  --bs-bg-color3:  rgba(54, 141, 168, 0.18);
  --bs-bg-color4:  rgba(54, 141, 168, 0.10);
  --bs-bg-color5:  rgba(255, 255, 255, 0.06);
  --light-color:   #e0eef3;
  --light-color2:  #c8e1ea;
  --light-color3:  #b2d4e0;
  --light-color4:  #93c1d2;
}

/* =============================================
   Backgrounds principais
   ============================================= */
body.bg-dark,
.page-wrapper.bg-dark {
  background-color: #045F7A !important;
}

/* Hero slider: fundo via data-bg-src carregado pelo main.js */
.tv-hero-section.overflow-hidden .bg.image {
  z-index: 0 !important;
}

/* Hero: altura mínima para não colapsar antes do JS carregar as imagens */
.tv-hero-section .hero-area {
  min-height: 620px;
}

/* Overlay escuro sobre cada slide — mais suave no centro para preservar a foto */
.tv-hero-section.overflow-hidden .hero-area .bg.image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(2, 42, 54, 0.78) 0%,
    rgba(4, 95, 122, 0.35) 55%,
    rgba(2, 42, 54, 0.65) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.tv-hero-section.overflow-hidden .container,
.tv-hero-section.overflow-hidden .hero-content,
.tv-hero-section.overflow-hidden .video-box {
  position: relative;
  z-index: 2;
}

/* =============================================
   Navbar — transparente sobre o hero
   ============================================= */
.tv-header,
.tv-header.header-style1 {
  background-color: transparent !important;
  background: transparent !important;
}

.tv-header .main-wrapper,
.tv-header.header-style1 .main-wrapper {
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Header-style1: barra de topo */
.tv-header.header-style1 .header-top {
  background-color: rgba(3, 61, 79, 0.92);
  border-bottom: 1px solid rgba(93, 166, 189, 0.2);
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.tv-header.header-style1 .header-top .list-style-1 li,
.tv-header.header-style1 .header-top .list-style-1 li a {
  color: #ffffff !important;
}

.tv-header.header-style1 .header-top .list-style-1 li a:hover {
  color: #87C437 !important;
}

.tv-header.header-style1 .header-top .menu-follow_title {
  color: rgba(93, 166, 189, 0.6);
}

.tv-header.header-style1 .header-top .social-icon-one a {
  color: #5DA6BD !important;
}

.tv-header.header-style1 .header-top .social-icon-one a:hover {
  color: #87C437 !important;
}

/* Sticky header (quando rola a página) — fundo branco igual ao main-wrapper */
.sticky-header {
  background-color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
}

/* Itens do menu */
.navigation > li > a,
.main-menu .navigation > li > a {
  color: #045F7A !important;
}

.navigation > li.active > a,
.navigation > li > a:hover,
.navigation > li > a.active {
  color: #63B12F !important;
}

/* =============================================
   Botão CTA principal "Baixar grátis" — Verde NewPDV
   ============================================= */
.theme-btn,
.theme-btn:visited {
  background-color: #63B12F !important;
  border-color: #63B12F !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(99, 177, 47, 0.25) !important;
}

.theme-btn:hover,
.theme-btn:focus {
  background-color: #4d8f24 !important;
  border-color: #4d8f24 !important;
  box-shadow: 0 4px 24px rgba(77, 143, 36, 0.32) !important;
}

/* Botão "Entrar" — outline azul claro */
.theme-btn.style-border {
  background-color: transparent !important;
  border: 1px solid #5DA6BD !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.theme-btn.style-border:hover {
  background-color: #368DA8 !important;
  border-color: #368DA8 !important;
  color: #ffffff !important;
}

/* =============================================
   Links gerais
   ============================================= */
a:hover {
  color: #87C437 !important;
}

/* =============================================
   Checkmarks e ícones verdes
   ============================================= */
.text-theme,
.fa-check,
i.fa-check,
.fa-solid.fa-check {
  color: #87C437 !important;
}

/* =============================================
   Textos do hero slider — contraste sobre imagens escuras
   ============================================= */
.tv-hero-section .hero-content .sub-title {
  color: #ffffff !important;
  letter-spacing: 1px;
}

.tv-hero-section .hero-content .hero-title {
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.tv-hero-section .hero-content .hero-title span {
  color: #87C437 !important;
}

.tv-hero-section .hero-content .text {
  color: #e8f4f9 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.tv-hero-section .slide-number {
  color: rgba(255, 255, 255, 0.25);
}

/* Texto SVG do círculo giratório */
.tv-hero-section .circle-box .text-inner svg text {
  fill: #5DA6BD;
}

/* =============================================
   Glow reduzido — visual mais limpo
   ============================================= */
[class*="glow"],
[class*="neon"] {
  filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* =============================================
   Preloader
   ============================================= */
.loader {
  border-color: #87C437 transparent #87C437 transparent !important;
}

/* =============================================
   Fix zoom 100%: círculo giratório não cortado
   ============================================= */
.tv-hero-section,
.tv-hero-section .hero-inner {
  overflow: hidden;
}

/* Fix zoom 100%: ponto azul abaixo do botão do header */
.tv-hero-section .theme-btn .arrow-all {
  display: none !important;
}

/* =============================================
   Hero slider: sem bordas arredondadas nas imagens
   ============================================= */
.tv-hero-section .hero-inner .hero-slider .hero-area {
  border-radius: 0 !important;
}

/* =============================================
   Hero slider: gradiente de transição com cores do tema
   ============================================= */
.tv-hero-section .hero-inner .hero-slider .hero-area::before {
  background-image: linear-gradient(
    100deg,
    rgba(2, 42, 54, 0.92) 0%,
    rgba(4, 95, 122, 0.75) 38%,
    rgba(4, 95, 122, 0.15) 65%,
    rgba(2, 42, 54, 0.05) 100%
  ) !important;
}
@media (max-width: 767px) {
  .tv-hero-section .hero-inner .hero-slider .hero-area::before {
    background-image: linear-gradient(
      100deg,
      rgba(2, 42, 54, 0.95) 0%,
      rgba(4, 95, 122, 0.80) 45%,
      rgba(4, 95, 122, 0.20) 80%,
      rgba(2, 42, 54, 0.05) 100%
    ) !important;
  }
}

/* =============================================
   Feature section: alturas iguais nos três cards
   ============================================= */
.tv-feature-section .row {
  align-items: stretch !important;
}

.tv-feature-section .col-lg-4 {
  display: flex;
  flex-direction: column;
}

.tv-feature-section .tv-feature-item,
.tv-feature-section .tv-feature-box {
  flex: 1;
  height: 100%;
}

/* =============================================
   Feature section: Card 1 — fundo escuro para contraste com texto branco
   ============================================= */
.tv-feature-section .tv-feature-item {
  background-color: #033d4f !important;
}

.tv-feature-section .tv-feature-item .client-social-proof {
  color: #ffffff !important;
}

.tv-feature-section .tv-feature-item .rating-viewers {
  color: rgba(255, 255, 255, 0.80) !important;
}

.tv-feature-section .tv-feature-item .count-box h2 {
  color: #ffffff !important;
}

/* =============================================
   About section — redesign completo
   ============================================= */

/* Row principal: alinhamento vertical centralizado */
.tv-about-section .row {
  align-items: center;
}

/* Coluna esquerda: fluxo vertical limpo */
.about-left,
.about-left-reflow {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 30px;
}
@media (max-width: 991px) {
  .about-left,
  .about-left-reflow {
    padding-right: 0;
    max-width: 100%;
  }
}

/* Título sem quebra estranha */
.tv-about-section .sec-title {
  font-size: 36px !important;
  line-height: 1.28 !important;
  margin-bottom: 0 !important;
}

/* Texto principal — contraste adequado */
.about-main-text {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #2d4a55 !important;
  margin: 0 !important;
}

/* CTA — sombra suave para destacar no fluxo */
.about-cta {
  align-self: flex-start;
  margin-top: 0 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Wrapper das imagens — pequena distância do botão */
.about-images-wrap {
  position: relative;
  margin-top: 10px;
}

/* Imagem principal — próxima do CTA */
.about-main-image {
  margin-top: 0;
  position: relative;
  z-index: 1;
}

/* Imagem secundária — complementar, ~60% da principal, sobreposta no canto inferior direito */
.about-secondary-image {
  position: absolute;
  right: -10px;
  bottom: -36px;
  width: 60%;
  max-width: 320px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(2, 42, 54, 0.18);
  border: 4px solid #ffffff;
  z-index: 2;
}
.about-secondary-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Espaço extra abaixo do wrapper para acomodar a sobreposição */
.about-images-wrap {
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .about-secondary-image {
    position: relative;
    right: auto;
    bottom: auto;
    width: 75%;
    max-width: 100%;
    margin: 18px auto 0;
  }
  .about-images-wrap {
    margin-bottom: 0;
  }
}

/* Coluna direita */
.about-right,
.about-right-reflow {
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 991px) {
  .about-right,
  .about-right-reflow {
    padding-left: 0;
  }
}

/* Box de autoridade — fundo claro com sombra suave */
.about-authority-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #f5f7fa;
  border: 1px solid rgba(54, 141, 168, 0.15);
  border-left: 4px solid #368DA8;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 6px 18px rgba(2, 42, 54, 0.06);
}

.about-authority-box .authority-icon {
  font-size: 28px;
  color: #368DA8;
  flex-shrink: 0;
  margin-top: 2px;
}

.about-authority-box .authority-text h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #033d4f !important;
  line-height: 1.3 !important;
  margin: 0 0 6px 0 !important;
}

.about-authority-box .authority-text p {
  font-size: 15px !important;
  color: #4a6d7c !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Lista de benefícios */
.about-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about-benefits-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #2d4a55;
  line-height: 1.4;
}

.about-benefits-list li i {
  color: #87C437;
  font-size: 14px;
  background: rgba(135, 196, 55, 0.12);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* =============================================
   Service section: fundo branco nos cards e
   correção dos detalhes de canto (SVG fix)
   ============================================= */

/* Cards brancos — remove o tint azulado do --light-color */
.tv-service-section .tv-service-item {
  background-color: #ffffff !important;
}

/* Corrige SVG ::before (canto superior esquerdo do número) */
.tv-service-section .tv-service-inner .tv-service-item .service-number::before {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23ffffff"></path></svg>') !important;
}

/* Corrige SVG ::after (canto inferior direito do número) */
.tv-service-section .tv-service-inner .tv-service-item .service-number::after {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23ffffff"></path></svg>') !important;
}

/* =============================================
   Service section: tags sem quebra de linha
   ============================================= */
.tv-service-section .tv-service-inner .tv-service-item .service-right .tags {
  display: flex !important;
  flex-wrap: wrap !important;
  max-width: none !important;
}

.tv-service-section .tv-service-inner .tv-service-item .service-right .tags span {
  white-space: nowrap !important;
}

/* =============================================
   Service Section — imagens com altura fixa
   ============================================= */
.tv-service-section .tv-service-inner .tv-service-item .service-left {
  min-width: 300px;
}
.tv-service-section .tv-service-inner .tv-service-item .service-left img {
  height: 340px !important;
  width: 100% !important;
  object-fit: cover !important;
}
@media (max-width: 912px) {
  .tv-service-section .tv-service-inner .tv-service-item .service-left img {
    height: 240px !important;
  }
}

/* =============================================
   Project Section — Segmentos
   Sobrescreve gradiente azul do template
   ============================================= */
.tv-project-single-box::before {
  background-image: linear-gradient(
    0deg,
    rgb(2, 42, 54) 0%,
    rgb(4, 63, 79) 18%,
    rgba(4, 63, 79, 0) 57%,
    rgba(4, 63, 79, 0) 100%
  ) !important;
}

.tv-project-single-box:hover::before {
  background-image: linear-gradient(
    0deg,
    rgb(2, 42, 54) 0%,
    rgb(4, 95, 122) 40%,
    rgba(4, 95, 122, 0.7) 75%,
    rgba(4, 95, 122, 0) 100%
  ) !important;
}

.tv-project-single-box .project-info .icon-box {
  background-color: var(--theme-color) !important;
}

/* Parágrafo e ícone: ocultos por padrão, surgem só no hover */
.tv-project-single-box .project-info p,
.tv-project-single-box .project-info .icon-box {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
}

.tv-project-single-box:hover .project-info p,
.tv-project-single-box:hover .project-info .icon-box {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}