/* =========================================================
   DAPWEB - overrides.css
   Organização:
   00) Tokens/Helpers
   10) Componentes globais
   20) HOME (page-home)
   30) QUEM SOMOS (page-quem-somos)
   40) SERVIÇOS (page-servicos)
   50) PORTFÓLIO (page-portfolio)
   ========================================================= */


/* =========================================================
   00) Tokens / Helpers (opcional)
   ========================================================= */

:root{
  --brand-red: #b71414;
  --bg-white: #ffffff;
  --bg-gray: #f6f7f9;
  --divider: #e9ecef;
}


/* =========================================================
   10) Componentes globais
   ========================================================= */

/* Nav: item ativo em vermelho */
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link[aria-current="page"]{
  color: var(--brand-red) !important;
}
.navbar-nav .nav-item.active > .nav-link span,
.navbar-nav .nav-link[aria-current="page"] span{
  color: var(--brand-red) !important;
}

/* TIME: fotos 1:1 + radius custom + respiro do LinkedIn */
.team-con .team-box-item figure{
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0 30px 100px 30px;
  margin: 0 0 14px;
}
.team-con .team-box-item figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.team-con .team-box-item .team-social-icon{
  margin-top: 10px;
  padding-bottom: 18px;
}
.team-con .team-box-item .team-social-icon a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.team-con .team-box-item{
  margin-bottom: 28px;
}


/* =========================================================
   20) HOME (page-home)
   ========================================================= */

.page-home{
  --section-bg: var(--bg-white);
  --section-bg-alt: var(--bg-gray);
  --section-divider: var(--divider);
  --section-pad-y: 96px;
  --section-pad-y-mobile: 64px;
}

/* 20.1) Remover degradês/overlays do template (home) */
.page-home .header-and-banner-con,
.page-home .banner-main-con,
.page-home .service-con,
.page-home .help-con,
.page-home .sloution-box-con,
.page-home .information-con,
.page-home .weight-footer-con{
  background-image: none !important;
  background: none !important;
}

.page-home .header-and-banner-con::before,
.page-home .header-and-banner-con::after,
.page-home .banner-main-con::before,
.page-home .banner-main-con::after,
.page-home .service-con::before,
.page-home .service-con::after,
.page-home .help-con::before,
.page-home .help-con::after,
.page-home .sloution-box-con::before,
.page-home .sloution-box-con::after,
.page-home .information-con::before,
.page-home .information-con::after,
.page-home .weight-footer-con::before,
.page-home .weight-footer-con::after{
  background-image: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* 20.2) Fundos alternados */
.page-home .header-and-banner-con{ background-color: var(--section-bg) !important; }
.page-home .service-con{ background-color: var(--section-bg) !important; }
.page-home .help-con{ background-color: var(--section-bg-alt) !important; }
.page-home .sloution-box-con{ background-color: var(--section-bg) !important; }
.page-home .information-con{ background-color: var(--section-bg-alt) !important; }
.page-home .weight-footer-con{ background-color: var(--section-bg) !important; }

/* 20.3) Divisórias entre seções */
.page-home .service-con,
.page-home .help-con,
.page-home .sloution-box-con,
.page-home .information-con,
.page-home .weight-footer-con{
  border-top: 1px solid var(--section-divider);
}

/* 20.4) Espaçamento vertical */
.page-home .service-con,
.page-home .help-con,
.page-home .sloution-box-con,
.page-home .information-con{
  padding-top: var(--section-pad-y) !important;
  padding-bottom: var(--section-pad-y) !important;
}

/* 20.5) Hero */
.page-home .banner-main-con{
  padding-top: 110px !important;
  padding-bottom: 90px !important;
}

@media (max-width: 991.98px){
  .page-home .service-con,
  .page-home .help-con,
  .page-home .sloution-box-con,
  .page-home .information-con{
    padding-top: var(--section-pad-y-mobile) !important;
    padding-bottom: var(--section-pad-y-mobile) !important;
  }
  .page-home .banner-main-con{
    padding-top: 96px !important;
    padding-bottom: 64px !important;
  }
}

/* 20.6) Sloution box (DAPMAPS): card branco e sem degradê */
.page-home .sloution-box-con{
  background: #fff !important;
  background-image: none !important;
}
.page-home .sloution-box-con::before,
.page-home .sloution-box-con::after{
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}
.page-home .sloution-box-con .sloution-box-content{
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--divider);
  border-radius: 18px;
  padding: 44px 36px;
  box-shadow: none;
}
.page-home .sloution-box-con .sloution-box-content::before,
.page-home .sloution-box-con .sloution-box-content::after{
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}
@media (max-width: 991.98px){
  .page-home .sloution-box-con .sloution-box-content{
    padding: 28px 18px;
  }
}

/* 20.7) Aumentar largura útil do DAPMAPS (quando usar .sloution-box-wide no container) */
.page-home .sloution-box-wide{
  max-width: 1320px;
}

/* 20.8) Centralizar texto do box do banner */
.page-home .banner-img-detail{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.page-home .banner-img-detail p,
.page-home .banner-img-detail h1,
.page-home .banner-img-detail h2,
.page-home .banner-img-detail h3,
.page-home .banner-img-detail span{
  margin: 0;
}

/* 20.9) Frame do mapa */
.page-home .dapmaps-frame{
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.page-home #map{
  height: 520px !important;
  width: 100% !important;
}
@media (max-width: 991.98px){
  .page-home #map{ height: 360px !important; }
}

/* 20.10) Controle do mapa (camadas/opacidade) */
.page-home .dapmaps-control{ background: transparent; }
.page-home .dapmaps-control__header{
  display: flex;
  justify-content: flex-end;
}
.page-home .dapmaps-control__toggle{
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  cursor: pointer;
}
.page-home .dapmaps-control__panel{
  display: none;
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  min-width: 210px;
}
.page-home .dapmaps-control--open .dapmaps-control__panel{ display: block; }
.page-home .dapmaps-control__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.page-home .dapmaps-control__row label{
  margin: 0;
  font-size: 12px;
  color: #555;
}
.page-home .dapmaps-control__select{
  width: 120px;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.page-home .dapmaps-control__sliderline{
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-home .dapmaps-control__row--slider input[type="range"]{ width: 120px; }
.page-home .dapmaps-control__hint{
  margin-top: 4px;
  font-size: 11px;
  color: #777;
}

/* HOME - Banner (imagem direita) */
.page-home .banner-right-con figure{
  width: 445px;
  height: 526px;
  overflow: hidden;
  border-radius: 0 30px 100px 30px; /* bordas personalizadas */
  margin: 0;
}

/* A imagem ocupa o frame sem deformar */
.page-home .banner-right-con figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: mantém proporção e evita estourar a largura */
@media (max-width: 991.98px){
  .page-home .banner-right-con figure{
    width: min(445px, 100%);
    height: auto;
    aspect-ratio: 445 / 526;
  }

  .page-home .banner-right-con figure img{
    height: 100%;
  }
}


/* =========================================================
   30) QUEM SOMOS (page-quem-somos)
   ========================================================= */

.page-quem-somos{
  --page-bg: var(--bg-white);
  --divider: var(--divider);
}

.page-quem-somos .header-and-banner-con,
.page-quem-somos .generic-banner-con,
.page-quem-somos .banner-main-con,
.page-quem-somos .sloution-box-con,
.page-quem-somos .service-con,
.page-quem-somos .team-con,
.page-quem-somos .client-con,
.page-quem-somos .information-con,
.page-quem-somos .tastimonials-con,
.page-quem-somos .weight-footer-con{
  background: var(--page-bg) !important;
  background-image: none !important;
}

.page-quem-somos .header-and-banner-con::before,
.page-quem-somos .header-and-banner-con::after,
.page-quem-somos .generic-banner-con::before,
.page-quem-somos .generic-banner-con::after,
.page-quem-somos .banner-main-con::before,
.page-quem-somos .banner-main-con::after,
.page-quem-somos .sloution-box-con::before,
.page-quem-somos .sloution-box-con::after,
.page-quem-somos .service-con::before,
.page-quem-somos .service-con::after,
.page-quem-somos .team-con::before,
.page-quem-somos .team-con::after,
.page-quem-somos .client-con::before,
.page-quem-somos .client-con::after,
.page-quem-somos .information-con::before,
.page-quem-somos .information-con::after,
.page-quem-somos .tastimonials-con::before,
.page-quem-somos .tastimonials-con::after,
.page-quem-somos .weight-footer-con::before,
.page-quem-somos .weight-footer-con::after{
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

.page-quem-somos .sloution-box-con,
.page-quem-somos .service-con,
.page-quem-somos .team-con,
.page-quem-somos .client-con,
.page-quem-somos .information-con,
.page-quem-somos .tastimonials-con,
.page-quem-somos .weight-footer-con{
  border-top: 1px solid var(--divider);
}

.page-quem-somos .sloution-box-content{
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--divider);
  border-radius: 18px;
}

.page-quem-somos .service-box-item,
.page-quem-somos .team-box-item,
.page-quem-somos .tastimonials-content{
  background-image: none !important;
}

/* QUEM SOMOS: fixar sloution-box-lft-img.png em 400x405 */
.page-quem-somos img[src$="assets/image/sloution-box-lft-img.png"],
.page-quem-somos img[src$="sloution-box-lft-img.png"]{
  width: 400px;
  height: 405px;
  object-fit: cover;
  display: block;
  border-radius: 0 30px 100px 30px; /* se quiser manter o padrão */
}

/* Garante centralização do bloco no mobile */
@media (max-width: 991.98px){
  .page-quem-somos .sloution-box-lft-content{
    display: flex;
    justify-content: center;
  }

  .page-quem-somos img[src$="assets/image/sloution-box-lft-img.png"],
  .page-quem-somos img[src$="sloution-box-lft-img.png"]{
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 400 / 405;
  }
}


/* =========================================================
   40) SERVIÇOS (page-servicos)
   ========================================================= */

.page-servicos{
  --section-bg: var(--bg-white);
  --section-bg-alt: var(--bg-gray);
}

/* 40.1) Remover apenas gradiente (mantém shapes) */
.page-servicos .generic-banner-con,
.page-servicos .service-build-con,
.page-servicos .experiences-con,
.page-servicos .price-plan-con,
.page-servicos .weight-footer-con{
  background-color: #fff !important;
  background-image: none !important;
}

.page-servicos .generic-banner-inner-con,
.page-servicos .service-build-inner-con,
.page-servicos .experiences-inner-con,
.page-servicos .price-plan-inner-con,
.page-servicos .weight-footer-inner-con{
  background-color: #fff !important;
  background-image: none !important;
}

/* 40.2) Utilitários de fundo (aplicar direto na <section>) */
.page-servicos .section-bg-alt{
  background-color: var(--section-bg-alt) !important;
  background-image: none !important;
}
.page-servicos .section-bg-alt::before,
.page-servicos .section-bg-alt::after{
  background-image: none !important;
  background-color: transparent !important;
}

.page-servicos .section-bg-white{
  background-color: var(--section-bg) !important;
  background-image: none !important;
}
.page-servicos .section-bg-white::before,
.page-servicos .section-bg-white::after{
  background-image: none !important;
  background-color: transparent !important;
}

/* SERVICES: garante que outras imagens dessa seção NÃO sejam afetadas */
.page-servicos .service-build-lft-con figure{
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
}

/* SERVICES: aplica o frame SOMENTE no strategic-img.png */
.page-servicos img[src$="assets/image/strategic-img.png"],
.page-servicos img[src$="strategic-img.png"]{
  width: 540px;
  height: 480px;
  object-fit: cover;
  display: block;
  border-radius: 0 30px 100px 30px;
}

/* Responsivo */
@media (max-width: 991.98px){
  .page-servicos img[src$="assets/image/strategic-img.png"],
  .page-servicos img[src$="strategic-img.png"]{
    width: 100%;
    max-width: 540px;
    height: auto;
    aspect-ratio: 540 / 480;
  }
}


/* =========================================================
   50) PORTFÓLIO (page-portfolio)
   ========================================================= */

.page-portfolio{
  --section-bg: var(--bg-white);
  --section-bg-alt: var(--bg-gray);
  --divider: var(--divider);
}

/* 50.1) Remover gradientes e aplicar alternância branco/cinza */
.page-portfolio .header-and-banner-con,
.page-portfolio .generic-banner-con,
.page-portfolio .client-con,
.page-portfolio .work-con,
.page-portfolio .project-con,
.page-portfolio .weight-footer-con{
  background-image: none !important;
}

.page-portfolio .header-and-banner-con::before,
.page-portfolio .header-and-banner-con::after,
.page-portfolio .generic-banner-con::before,
.page-portfolio .generic-banner-con::after,
.page-portfolio .client-con::before,
.page-portfolio .client-con::after,
.page-portfolio .work-con::before,
.page-portfolio .work-con::after,
.page-portfolio .project-con::before,
.page-portfolio .project-con::after,
.page-portfolio .weight-footer-con::before,
.page-portfolio .weight-footer-con::after{
  background-image: none !important;
  background-color: transparent !important;
}

.page-portfolio .generic-banner-con{ background-color: var(--section-bg) !important; }
.page-portfolio .client-con{ background-color: var(--section-bg-alt) !important; }
.page-portfolio .work-con{ background-color: var(--section-bg) !important; }
.page-portfolio .project-con{ background-color: var(--section-bg-alt) !important; }
.page-portfolio .weight-footer-con{ background-color: var(--section-bg) !important; }

.page-portfolio .client-con,
.page-portfolio .work-con,
.page-portfolio .project-con,
.page-portfolio .weight-footer-con{
  border-top: 1px solid var(--divider);
}

/* 50.2) Parceiros: logos 4:3 */
.page-portfolio .client-con .carousel-item .col-md-3{
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-portfolio .client-con .carousel-item .col-md-3 img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 14px;
}

/* 50.3) Modal do portfólio maior e legível */
@media (min-width: 992px){
  .page-portfolio #work-portfolio-modal .modal-dialog{
    max-width: 1240px;
    width: calc(100vw - 48px);
  }
}
.page-portfolio #work-portfolio-modal .modal-content{
  border-radius: 16px;
}
.page-portfolio #work-portfolio-modal .modal-body{
  padding: 18px 22px 22px;
}
.page-portfolio #workPortfolioModalImg{
  max-height: 86vh;
  width: 100%;
  object-fit: contain;
}