/* =========================================================
   BASE / NAVBAR
   ========================================================= */
:root{
  --brand:#0d6efd;
  --ink:#0b1535;
  --muted:#445574;
}

.brand-logo{height:44px;width:auto;display:block}
@media (max-width:576px){.brand-logo{height:34px}}

.navbar.sticky-top{transition:box-shadow .2s ease}
.navbar.scrolled{box-shadow:0 6px 16px rgba(0,0,0,.08)}

/* =========================================================
   HERO (PARALLAX REAL VIA .hero-bg)
   ========================================================= */
.hero-fit{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center;
  overflow:hidden;
}

.hero-bg{
  position:absolute; left:0; top:-10vh;
  width:100%; height:120vh;
  background-size:cover;
  background-position:center var(--focusY, 50%);
  will-change:transform;
  transform:translate3d(0,0,0);
  z-index:0;
}

/* 🔥 AJUSTE: overlay mais leve para clarear a imagem */
.hero-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.18);  /* antes era .45 */
  z-index:1;
}

.hero-fit .container{
  position:relative; z-index:2;
  padding:0 1rem;
}

/* Telas “achatadas” (muita largura, pouca altura) */
@media (min-aspect-ratio: 16/9) and (max-height:700px){
  .hero-bg{
    height:110vh; top:-5vh;
    background-size:contain;
    background-color:#000;
  }
  .hero-overlay{ background:rgba(0,0,0,.25); }
}

/* Mobile */
@media (max-width:576px){
  .hero-bg{ top:0; height:100vh; }
}

/* =========================================================
   SERVIÇOS — CARDS GRANDES (FOTO CHEIA)
   ========================================================= */
.service-card{
  border:0;border-radius:20px;overflow:hidden;
  background:#0b0d12;box-shadow:0 14px 34px rgba(0,0,0,.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.18)}

.service-media{
  position:relative;height:300px;background:#000;isolation:isolate;
}
@media (max-width:576px){.service-media{height:240px}}

.service-media img{
  width:100%;height:100%;
  object-fit:cover; object-position:center 18%;
  display:block; transform:scale(1); transition:transform .5s ease;
}
.service-card:hover .service-media img{transform:scale(1.06)}

.service-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35) 100%);
  pointer-events:none;
}

.service-badge{
  position:absolute;left:16px;bottom:14px;
  background:rgba(13,110,253,.95);color:#fff;
  font-weight:700;font-size:.78rem;padding:6px 10px;border-radius:999px;
  letter-spacing:.3px;text-transform:uppercase;
  box-shadow:0 8px 18px rgba(13,110,253,.35);
}

.service-content{
  background:#fff;padding:22px 20px 24px;border-top:4px solid var(--brand);
}
.service-title{color:var(--ink);font-weight:800;font-size:1.15rem;margin:0 0 .5rem}
.service-text{color:var(--muted);line-height:1.75;font-size:1.05rem}

/* focos manuais */
.service-media[data-focus="top"]   img{object-position:center 8%}
.service-media[data-focus="upper"] img{object-position:center 12%}
.service-media[data-focus="face"]  img{object-position:center 16%}

/* =========================================================
   PLANOS / PREÇOS
   ========================================================= */
.pricing-card{
  background:#fff;border:0;border-radius:16px;padding:22px;height:100%;
  box-shadow:0 10px 26px rgba(0,0,0,.06)
}
.pricing-card.highlight{
  border:1px solid #0d6efd33;box-shadow:0 14px 34px rgba(13,110,253,.20)
}
.pricing-card .price{font-size:24px;font-weight:800;margin:.25rem 0 1rem}
.pricing-card ul{padding-left:18px;margin:0 0 16px}
.pricing-card li{margin:.25rem 0}

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.testimonial{
  background:#fff;border:0;border-radius:14px;padding:22px;text-align:center;
  box-shadow:0 10px 26px rgba(0,0,0,.06)
}

/* =========================================================
   GALERIA (OWL)
   ========================================================= */
.media-carousel .item{
  border-radius:16px;overflow:hidden;background:#0b0d12;
  box-shadow:0 10px 26px rgba(0,0,0,.10);
  aspect-ratio:16/9;
}
@media (max-width:992px){.media-carousel .item{aspect-ratio:4/3}}
@media (max-width:576px){.media-carousel .item{aspect-ratio:1/1}}

.media-carousel .media-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.media-carousel .media-video video{
  width:100%;height:100%;object-fit:contain;background:#000;display:block;
}

.media-carousel .owl-nav button{
  position:absolute;top:45%;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.96)!important;box-shadow:0 10px 24px rgba(0,0,0,.16)
}
.media-carousel .owl-nav .owl-prev{left:-8px}
.media-carousel .owl-nav .owl-next{right:-8px}
.media-carousel .owl-dots{margin-top:10px}

/* Anti-corte */
.media-photo img{ object-position:center }
.media-photo.is-portrait img{
  object-fit:contain; background:#000;
}

/* focos */
.media-photo[data-focus="top"]   img{object-position:center 10%}
.media-photo[data-focus="upper"] img{object-position:center 5%}
.media-photo[data-focus="face"]  img{object-position:center 15%}

/* Navbar dropdown */
.navbar .dropdown-menu { padding: .5rem; border-radius: .75rem }

/* =========================================================
   HERO que usa IMG (versão sua final)
   ========================================================= */
.hero-fit{
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center; overflow:hidden;
}

.hero-bg{ position:absolute; inset:0; will-change:transform; }

/* 🔥 AJUSTE PRINCIPAL: imagem mais clara + mais viva */
.hero-img{
  position:absolute; left:0; top:-10vh;
  width:100%; height:120vh;
  object-fit:contain;
  object-position:center;
  background:#000;
  transform:translate3d(0,0,0);
  filter:brightness(1.25) contrast(1.05);
}

.hero-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.18);
}

.hero-fit .container{
  position:relative; z-index:1; padding:0 1rem;
}

/* Mobile */
@media (max-width:576px){
  .hero-img{ top:0; height:100vh; }
}

/* Galeria */
.gallery-photo{
  aspect-ratio: 1 / 1;
  border-radius: 16px; overflow: hidden; background:#0b0d12;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.gallery-photo img{ width:100%; height:100%; object-fit:cover; display:block }

.video-box{
  aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; background:#000;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.video-box video{ width:100%; height:100%; object-fit:contain; background:#000 }

#heroTitle,
#heroDesc {
  transition: opacity .6s ease-in-out;
}

#heroTitle.is-fading,
#heroDesc.is-fading {
  opacity: 0;
}

/* =========================================================
   TEXTO EM SEÇÃO ESCURA (ATLAS) – MAIS NÍTIDO
   ========================================================= */
.section-dark-text{
  color:#ffffff;
  font-size:1.1rem;
  line-height:1.85;
  font-weight:400;
  text-align:left;
  text-shadow:0 0 8px rgba(0,0,0,0.35);
}

.section-dark-text h1,
.section-dark-text h2,
.section-dark-text h3{
  color:#ffffff;
  font-weight:800;
  letter-spacing:.02em;
  text-shadow:0 0 10px rgba(0,0,0,0.45);
}

.section-dark-text p{
  color:#f2f4f7 !important;
  margin-bottom:1rem;
}

.section-dark-text ul{
  margin-top:1.25rem;
  margin-bottom:0;
  padding-left:1.1rem;
}

.section-dark-text li{
  margin-bottom:.4rem;
}

/* Mobile: ajusta um pouco o tamanho para caber melhor */
@media (max-width:576px){
  .section-dark-text{
    font-size:1rem;
    line-height:1.75;
  }
}

/* =========================================================
   AJUSTE FINAL – texto da seção SOBRE totalmente branco
   ========================================================= */
#sobre p,
#sobre .text-secondary{
  color:#ffffff !important;
}
/* =========================================================
   WhatsApp flutuante (Atlas)
   ========================================================= */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 9999;

  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  transition: transform .15s ease, filter .15s ease;
}

.wa-float i{
  font-size: 30px;
  line-height: 1;
}

.wa-float:hover{
  transform: scale(1.06);
  filter: brightness(1.05);
}

.wa-float::before{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: rgba(37, 211, 102, .35);
  animation: waPulse 1.5s ease-out infinite;
  z-index: -1;
}

@keyframes waPulse{
  0%   { transform: scale(.75); opacity: .85; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* Se existir "voltar ao topo", empurra ele pra cima pra não bater no Whats */
.back-to-top{
  bottom: 90px !important;
}

@media (max-width: 576px){
  .wa-float{ width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .wa-float i{ font-size: 28px; }
  .back-to-top{ bottom: 80px !important; }
}
