/* ======== Paleta ======== */
:root{ --dark:#0B0B0B; --gold:#C9A227; --light:#FFFFFF; --gold-bright:#EAC24F }
body{background-color:var(--dark); color:var(--light)}
.text-gold{color:var(--gold)!important}
.bg-gold{background-color:var(--gold)!important}
.border-gold{border-color:var(--gold)!important}
.btn-gold{background-color:var(--gold); color:#111; border:none}
.btn-gold:hover{background-color:var(--gold-bright); color:#111; filter:none}
.link-gold{color:var(--gold-bright)}
.text-white{color:#fff!important}

/* ======== Tipografia & Espaçamento ======== */
body, button, input, textarea{font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,.section-title{font-family:'Montserrat Alternates','Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
html{scroll-behavior:smooth}
body{font-size:clamp(16px, 1.02rem + .25vw, 18px)}
p{line-height:2; margin-bottom:1.25rem; margin-top:26px
}
.lead{line-height:1.8}
li{line-height:1.9}
.section-title{font-weight:700; letter-spacing:.3px; margin-bottom:1rem}
main section{padding-top:clamp(3rem,5vw,6rem); padding-bottom:clamp(3rem,5vw,6rem)}
#especializacao{padding-top:2px; padding-bottom:0; min-height: 800px;}
@media (min-width: 992px){
  #especializacao{height: 800px;}
}

/* ======== Background Global ======== */
body{position:relative}
body::before{content:""; position:fixed; inset:0; z-index:-2; background:
  linear-gradient(135deg, rgba(11,11,11,.98) 0%, rgba(18,18,18,.98) 50%, rgba(11,11,11,.98) 100%)}

/* ======== Parallax / Hero ======== */
.parallax{background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-size:cover; position:relative; isolation:isolate}
.overlay-dark::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.62); z-index:-1}
.hero{min-height:90vh; display:flex; align-items:center}

/* ======== Reveal ======== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* ======== Navbar / Links / Botões ======== */
.navbar-dark{background:var(--dark)!important; border-bottom:1px solid rgba(201,162,39,.35); backdrop-filter:saturate(180%) blur(10px)}
.navbar-no-border{border-bottom-color:transparent!important}
.navbar .nav-link{color:#f0f0f0; transition:color .2s ease}
.navbar .nav-link:hover{color:var(--gold-bright)}
.btn{border-radius:1rem; transition: transform .15s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 .5rem 1.25rem rgba(0,0,0,.25)}
.btn-outline-light:hover{color:#111!important}
/* Carousel controls mais visíveis e afastados */
.carousel-control-prev, .carousel-control-next{width:12%}
.carousel-control-prev-icon, .carousel-control-next-icon{filter: drop-shadow(0 0 6px rgba(0,0,0,.8)); background-color:rgba(201,162,39,.9); border-radius:50%; background-size: 60% 60%;}
.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23111111' viewBox='0 0 16 16'%3e%3cpath d='M11 1 3 8l8 7' stroke='%23111111' stroke-width='2' fill='none'/%3e%3c/svg%3e");}
.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23111111' viewBox='0 0 16 16'%3e%3cpath d='M5 1l8 7-8 7' stroke='%23111111' stroke-width='2' fill='none'/%3e%3c/svg%3e");}

/* ======== Cards ======== */
.card-dark{background:#121212; border:1px solid rgba(201,162,39,.45); border-radius:1rem; color:#fff; transition:transform .2s ease, box-shadow .25s ease, border-color .2s}
.card-dark:hover{transform:translateY(-3px); box-shadow:0 .75rem 1.5rem rgba(0,0,0,.35); border-color:rgba(201,162,39,.75)}

/* ======== Seção clara (especialização) ======== */
.section-light{background:#ffffff; color:#111}
.section-light .section-title, .section-light h1, .section-light h2, .section-light h3{color:var(--gold)}
.card-plain{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:1rem; box-shadow:0 .25rem 1rem rgba(0,0,0,.06)}

/* ======== Utilitários ======== */
.title-icon{width:2.25rem; height:2.25rem; display:inline-grid; place-items:center; border-radius:50%; background:rgba(201,162,39,.15); color:var(--gold); margin-right:.6rem}
.to-top{position:fixed; right:1rem; bottom:1rem; z-index:1080; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease}
.to-top.show{opacity:1; visibility:visible; transform:none}
/* Equipe: aumentar altura mínima do card e espaçamento */
#equipe .card.card-dark{min-height: 100%}
#equipe .card.card-dark .card-img-top{height: 320px; object-fit: cover; object-position: center top}
#equipe .card.card-dark .card-body{padding-top: 1rem}
#equipe .card.card-dark .card-title{margin-bottom: .5rem}
/* Serviços: títulos maiores e com mais separação do texto */
#servicos .card .card-title{font-size:1.45rem; font-weight:700; margin-bottom:.85rem}
/* Fotos clean com leve efeito */
.img-zoom{transition:transform .35s ease}
.img-zoom:hover{transform:scale(1.03)}
/* Garantir altura visível para a foto da seção Especialização */
#especializacao .ratio-3x4{min-height:420px}
@media (max-width: 991.98px){ #especializacao .ratio-3x4{min-height:340px} }
/* Especialização: card sem borda e texto mais leve */
#especializacao .card-dark{border:none}
/* Clientes: normalizar logos */
#clientes img{max-height:60px; object-fit:contain}
/* ======== Responsividade - Mobile ======== */
@media (max-width: 991.98px){
  /* FORCE: Esconder imagens sem fundo */
  img[src*="diego_sem_fundo"],
  img[src*="joao_sem_fundo"]{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Seção Liderança - esconder imagem do Diego */
  #lideranca{
    padding:2rem 0 !important;
    height:auto !important;
    overflow:hidden !important;
  }
  #lideranca .col-lg-7{
    display:none !important;
  }
  #lideranca .col-lg-5{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }

  /* Seção Especialização - esconder imagem do João */
  #especializacao{
    padding:2rem 0 !important;
    height:auto !important;
    min-height:auto !important;
    overflow:hidden !important;
  }
  #especializacao .col-lg-7{
    display:none !important;
  }
  #especializacao .col-lg-5{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
  }
}
/* Depoimentos: fundo claro e setas mais afastadas */
#depoimentos{background:#fff; color:#111}
#depoimentos .section-title{color:var(--gold); text-align:center}
#depoimentos .lead, #depoimentos .blockquote-footer{color:#111}
#carouselDepo .carousel-inner{padding:0 2rem}
#carouselDepo .carousel-control-prev, #carouselDepo .carousel-control-next{width:4rem}
#carouselDepo .carousel-control-prev{left:-1.25rem}
#carouselDepo .carousel-control-next{right:-1.25rem}
#carouselDepo .carousel-control-prev-icon, #carouselDepo .carousel-control-next-icon{filter:none}

/* ======== Melhorias gerais de responsividade ======== */
@media (max-width: 991.98px){
  /* Hero: ajustar altura mínima em mobile */
  .hero{min-height:75vh; padding-top:6rem; padding-bottom:3rem}

  /* Títulos: reduzir tamanho em mobile */
  .display-4{font-size:2rem !important}
  .h1, h1{font-size:1.85rem}
  .h2, h2{font-size:1.5rem}
  .lead{font-size:1.05rem}

  /* Espaçamento de seções em mobile */
  main section{padding-top:2.5rem; padding-bottom:2.5rem}

  /* Botões: largura total em mobile quando necessário */
  .hero .btn{width:100%; text-align:center}

  /* Cards: melhor espaçamento */
  .card-dark{margin-bottom:1rem}

  /* Navbar brand: reduzir tamanho do logo */
  .navbar-brand img{height:70px !important}

  /* Formulários: melhor legibilidade */
  .form-control, .form-floating > label{font-size:0.95rem}

  /* Carousel: ajustar controles em mobile */
  #carouselDepo .carousel-inner{padding:0 1rem}
  .carousel-control-prev, .carousel-control-next{width:15%}
}

/* Tablets e dispositivos médios */
@media (max-width: 767.98px){
  /* Ajustar grid de cards para mobile */
  .row.g-4{gap:1.5rem !important}

  /* Hero: ajustar ainda mais em telas pequenas */
  .hero{min-height:65vh}

  /* Depoimentos: reduzir padding do carousel */
  #carouselDepo .carousel-inner{padding:0 0.5rem}


}

/* some o nome do escritorio */
@media (max-width: 1200px) {
    .brand-name-hide {
        display: none !important;
    }
}

/* Dispositivos pequenos (smartphones) */
@media (max-width: 575.98px){
  /* Títulos ainda menores */
  .display-4{font-size:1.75rem !important}
  .h1, h1{font-size:1.65rem}

  /* Botões: espaçamento melhor */
  .btn{padding:0.65rem 1.25rem; font-size:0.95rem}

  /* Container: reduzir padding lateral */
  .container{padding-left:1rem; padding-right:1rem}

  /* Carousel: esconder controles ou torná-los menores */
  .carousel-control-prev-icon, .carousel-control-next-icon{width:30px; height:30px}
}

.card-cond img{
  width: 240px;
  height: 170px;
}

.livro_section{
  font-size: 14px;
}

/* Controla a largura total da seção do carrossel */
#carouselFotosEscritorio {
    max-width: 1000px; /* Ajuste aqui a largura que preferir */
    margin: 0 auto;
    padding: 0 40px; /* Espaço para as setas não ficarem em cima das fotos */
}

/* Aspecto Vertical Customizado (se o ratio-3x4 do Bootstrap não estiver disponível) */
.ratio-3x4 {
    --bs-aspect-ratio: 133.33%; /* 4 dividido por 3 */
}

/* Personaliza as setas para ficarem nas laterais externas */
.custom-control {
    width: 5%;
    filter: invert(1); /* Deixa a seta preta se o fundo for muito claro, ou remova para branco */
}

.carousel-control-prev { left: -20px; }
.carousel-control-next { right: -20px; }

/* Destaque dourado nos indicadores se for usar */
.carousel-indicators [data-bs-target] {
    background-color: #c5a059;
}

@media (max-width: 768px) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}