/* =========================================================
   custom.css — Customize cores e backgrounds do layout
   ========================================================= */

/* 1) Variáveis de tema (troque aqui e muda o site todo) */
:root{
  --brand-navy: #001427;     /* fundo do topo/hero */
  --brand-footer: #24293a;   /* fundo do rodapé */
  --brand-sand: #d9d2c5;     /* seção "Serviços" */
  --brand-cream: #f0eadc;    /* faixa/contato */
  --ink: #0f172a;            /* texto principal */
  --muted: #5b6776;          /* texto secundário */
  --line: #e7e5e4;           /* bordas */
  --radius: 14px;

  --color-bege: #e6ddc6;
  --color-bege-escuro: #cec5a6;
  --color-azul: #2a2d3c;
  --color-cinza: #f6f6f6;
  

  --title-font: "Playfair Display", serif;
  --body-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Watermark (linhas) — substitua por outro SVG/PNG se quiser */
  --watermark-opacity: .10;
  --watermark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cg fill='none' stroke='%235b6776' stroke-opacity='.55' stroke-width='2'%3E%3Cpath d='M120 740 L420 520 L720 740'/%3E%3Cpath d='M420 520 L420 740'/%3E%3Cpath d='M360 575 L480 575'/%3E%3Cpath d='M310 625 L530 625'/%3E%3Cpath d='M260 675 L580 675'/%3E%3Cpath d='M760 760 L760 450 L1040 450 L1040 760'/%3E%3Cpath d='M760 520 L1040 520'/%3E%3Cpath d='M760 590 L1040 590'/%3E%3Cpath d='M820 450 L820 760'/%3E%3Cpath d='M900 450 L900 760'/%3E%3Cpath d='M980 450 L980 760'/%3E%3Cpath d='M1100 760 L1480 760'/%3E%3Cpath d='M1120 760 L1120 610 L1280 520 L1460 610 L1460 760'/%3E%3Cpath d='M1280 520 L1280 760'/%3E%3C/g%3E%3C/svg%3E");
}

/* 2) Base */
html, body { height: 100%; }
body{
  font-family: var(--body-font);
  color: var(--ink);
  padding-top: 90px;
}

a{ text-underline-offset: 3px; }
small, .text-muted{ color: var(--muted) !important; }

/* .section-pad{ padding: 84px 0 0 0; }
@media (max-width: 991.98px){
  .section-pad{ padding: 64px 0; }
} */

.section{ padding: 84px 0; }
@media (max-width: 991.98px){
  .section{ padding: 64px 0; }
} 

/* =========================================================
   Testimonials / Depoimentos
   ========================================================= */
.testimonial-card {
  max-width: 750px;
  margin: 0 auto;
  padding: 20px;
}

.testimonial-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff; /* ou var(--color-bege) */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.testimonial-quote {
  font-family: var(--title-font);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Ajusta botões do carousel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--brand-navy); /* seta escura */
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  background-size: 40%;
}


/* 3) Navbar */
.navbar.kp-nav{
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.kp-brand{
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: lowercase;
}
.kp-nav .nav-link{
  color: #1f2937;
  font-size: .92rem;
}
.kp-nav .nav-link:hover{ color: #111827; }
.kp-nav .nav-link.active{ font-weight: 600; }

/* 4) Tipografia */
.kicker{
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker-title{
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--title-font);
}
.kp-title{
  font-family: var(--title-font);
  letter-spacing: .02em;
}
.kp-title.upper{
  text-transform: uppercase;
  /* letter-spacing: .08em; */
}

/* 5) Botões (sem mexer no "primary" do Bootstrap) */
.btn-kp{
  border-radius: 10px;
  padding: .7rem 1.05rem;
  font-weight: 600;
}
.btn-kp-cream{
  background: var(--brand-cream);
  border: 1px solid rgba(255,255,255,.25);
  color: #0b1220;
}
.btn-kp-cream:hover{ filter: brightness(.98); }
.btn-kp-outline{
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
}
.btn-kp-outline:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
}

/* 6) Hero */
.hero{
  background: linear-gradient(90deg,rgba(0, 24, 40, 1) 0%, rgba(68, 80, 106, 1) 100%);
  color: #fff;
  position: relative;
}
.hero .kicker{ color: rgba(255,255,255,.75); }
.hero .lead{ color: rgba(255,255,255,.78); }

.hero-photo{
  position: relative;
  border-left: 6px solid rgba(255,255,255,.18);
  border-radius: 0 18px 18px 0;
  overflow: hidden;
  min-height: 380px;
  background: rgba(255,255,255,.06);
}
.hero-photo::before{
  /* "K" gigante decorativo (troque se quiser) */
  content:"K";
  position:absolute;
  right: 26px;
  top: 24px;
  font-family: var(--title-font);
  font-size: 180px;
  line-height: 1;
  color: rgba(255,255,255,.10);
}
.hero-photo .img-ph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  text-align:center;
  color: rgba(255,255,255,.75);
  border: 1px dashed rgba(255,255,255,.25);
  margin: 18px;
  border-radius: 16px;
}

/* 7) Cards e placeholders */
.card.kp-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.kp-card .card-title{ font-weight: 700; }

.img-mini{
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: linear-gradient(135deg, rgba(203,213,225,.35), rgba(203,213,225,.10));
  min-height: 96px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
}

/* 8) Seções e backgrounds */
.bg-cream{ background: var(--brand-cream); }
.bg-sand{ background: var(--brand-sand); }
.bg-soft{ background: #f6f6f6; }

/* Parallax Moderno para #servicos */
#servicos {
  background-image: url('images/bg-servicos.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Overlay suave para garantir leitura */
#servicos::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: rgba(246, 246, 246, 0.92); Tom claro quase sólido para manter a identidade clean */
  z-index: 0;
}

#servicos > .container {
  position: relative;
  z-index: 1;
}

.has-watermark{ position: relative; overflow: hidden; }

/* .has-watermark::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--watermark-image);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  opacity: var(--watermark-opacity);
  pointer-events:none;
} */
.has-watermark > .container{ position: relative; z-index: 1; }

.kp-steps{
  max-width: 1200px;
  margin: 0 auto;
}

/* 9) Processo — steps numerados */
.kp-steps .step{
  display:flex;
  gap: 14px;
  padding: 14px 0;
}
.kp-steps .num{
  width: 28px;
  height: 28px;
  border-radius: 0;
  font-weight: 200;
  background: #e8e2d6;
  color: #253041;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}
.kp-steps .txt b{ display:block; }
.kp-steps .txt{ color: var(--muted); }

/* 10) Accordion refinado */
.accordion.kp-acc .accordion-item{
    border: 0;
    border-radius: 0;
    overflow: hidden;
}
.accordion.kp-acc .accordion-item + .accordion-item{ margin-top: 10px; }
.accordion.kp-acc .accordion-button{
  font-weight: 300;
  color: #111827;
  background: #fff;
}
.accordion.kp-acc .accordion-button:not(.collapsed){
  background: #fff;
  box-shadow: none;
}
.accordion.kp-acc .accordion-body{ color: var(--muted); }

/* 11) Footer */
.footer{
  background: var(--brand-footer);
  color: rgba(255,255,255,.86);
}
.footer a{ color: rgba(255,255,255,.86); }
.footer a:hover{ color: #fff; }
.footer .muted{ color: rgba(255,255,255,.65); }


/* Custom */
.text-bege{
  color: var(--color-bege) !important;
}

.text-cinza{
  color: var(--color-cinza) !important;
}

.text-azul{
  color: var(--muted) !important;
}

.btn{
  border-radius: 0!important;
  -webkit-border-radius: 0!important;
  -moz-border-radius: 0!important;
  -ms-border-radius: 0!important;
  -o-border-radius: 0!important;
}

.btn-bege-escuro{
  background: var(--color-bege-escuro);
  border: 1px solid rgba(255,255,255,.25);
  color: #0b1220;
}
.btn-bege-escuro:hover{
  filter: brightness(.98);
  -webkit-filter: brightness(.98);
  border: 1px solid rgba(255,255,255,.35);
  color: #0b1220;
}

.btn-azul{
  background: var(--color-azul);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}
.btn-azul:hover{
  filter: brightness(.98);
  -webkit-filter: brightness(.98);
  border: 1px solid var(--color-azul);
  color: var(--color-azul);
}

.btn-bege{
  background: var(--color-bege);
  border: 1px solid rgba(255,255,255,.25);
  color: #0b1220;
}
.btn-bege:hover{
  filter: brightness(.98);
  -webkit-filter: brightness(.98);
  -webkit-filter: brightness(.98);
  border: 1px solid rgba(255,255,255,.35);
  color: var(--color-bege);
}

.btn-outline-bege{
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: var(--color-bege);
}
.btn-outline-bege:hover{
  background: var(--color-bege-escuro);
  color: #0b1220;
}

.bg-azul{
  background: #44506a;
  color: #fff;
}

.bg-azul:hover{
  background: #44506a;
  filter: brightness(.95);
  -webkit-filter: brightness(.95);
  color: #fff;
}

.bg-cinza{
  background: var(--color-cinza);
}

.bg-bage{
  background: #f5f1e8;
}



.lista-hero{
  font-size: 12px;
  color: #fff;
}

.lista-hero i{
  color: var(--color-bege);
}

.lead{
  font-size: 15px;
}

.image-hero{
  max-height: 70vh;
}

#sobre{
  background-image: url('images/bg-sobre.jpg');
  background-size: cover;
  background-position: center;
}

.italic{
  font-style: italic;
}

.h6{
  font-weight: 200!important;
  margin-bottom: 20px;
}

.h6 i{
  color: var(--color-bege);
}

@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 3rem;
    }
}

@media (min-width: 1200px) {
.w-lg-50{
  width: 50%!important;
}
}

.icon-base{
  font-size: 30px;
}

span.text-sob {
    margin-left: -21px;
    font-weight: 200;
}

.list-unstyled{
  font-weight: 200!important;
  font-size: 14px;
}

.indicador{
  font-size: 5px;
}

.h5{
  font-weight: 600!important;
  color: var(--color-bege-escuro);
  font-size: 35px;
  font-family: var(--title-font);
}

.card-bege{
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;

  box-shadow: 0px -1px 18px -2px var(--color-bege-escuro);
-webkit-box-shadow: 0px -1px 18px -2px var(--color-bege-escuro);
-moz-box-shadow: 0px -1px 18px -2px var(--color-bege-escuro);
}

#servicos{
  background-image: url('images/bg-servicos.jpg');
  background-size: cover;
  background-position: center;
}



form input,
form textarea, 
form select{
  border-radius: 0!important;
  background: transparent!important;
  -webkit-border-radius: 0!important;
  -moz-border-radius: 0!important;
  -ms-border-radius: 0!important;
  -o-border-radius: 0!important;
  border-color: var(--color-bege-escuro)!important;
}

.img-capa{
      width: 23vw;
}



/* MOBILE */

@media (max-width: 575.98px) {

  .img-logo{
    width: 230px;
  }

  .hero{
    text-align: center;
  }

  .logo-footer{
    width: 230px;
  }

  footer{
    text-align: center;
  }

  .direitos{
    text-align: center;
  }

  .img-capa{
    width: 100%;
  }

}

/* =========================================================
   Animações de Scroll
   ========================================================= */
.scroll-hidden {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

.scroll-visible {
  opacity: 1;
  transform: translateY(0);
}


div#carouselTestimonials {
    min-height: 550px;
    display: block;
}
/* =========================================================
   Botão WhatsApp Flutuante
   ========================================================= */
.whatsapp-float {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  background-color: #128C7E;
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.6);
}

@media (max-width: 768px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 26px;
    bottom: 30px;
    right: 30px;
  }
}