/* ============================================================
   Silva Pinto — esquema "AREJADO INSTITUCIONAL"
   Alinhado à comunicação do Instagram: navy + dourado + areia.
   Mantém a leveza (site majoritariamente claro em areia),
   com poucos blocos escuros em navy e acento dourado.
   Paleta IG: navy #19232b · dourado #b88a4f / #97682f (escuro p/ luz)
              areia #f6f1e9→#e7dcc9 · corpo ardósia #44505b
   Carregar por último (vence style.css e demais schemes).
   ============================================================ */

:root, * {
  /* acento (botões, links, hovers, dots) — dourado escurecido p/ contraste em fundo claro */
  --primary-color: #97682f;
  --primary-color-rgb: 151, 104, 47;
  --secondary-color: #97682f;
  --secondary-color-rgb: 151, 104, 47;

  /* texto e títulos */
  --body-font-color: #44505b;            /* ardósia quente (IG) */
  --heading-font-color: #19232b;         /* navy (IG) */

  /* fundos claros — areia/bege do IG (site majoritariamente claro) */
  --bg-default: #f4eee3;
  --bg-light:   #faf6ef;
  --bg-grey:    #efe7d9;
  --bg-color-even: #efe7d9;
  --bg-color-odd:  #faf6ef;

  /* blocos escuros (poucos) — navy do IG */
  --bg-dark-1: #19232b;
  --bg-dark-2: #243240;
  --bg-dark-3: #2d3f50;
  --bg-dark-1-rgb: 25, 35, 43;

  --footer-background-color: #19232b;
  --swiper-theme-color: #b88a4f;
}

/* --- Seções escuras: o template usa .section-dark mas NÃO a define em
   nenhum CSS (só o footer tem fundo próprio). Sem isto, blocos como o CTA
   "Fale com o escritório, com sigilo" ficam com texto claro sobre fundo
   claro (ilegível). Aqui damos o fundo navy a essas seções. --- */
.section-dark { background-color: var(--bg-dark-1); }
.section-dark .subtitle { color: #cda063; }

/* --- Legibilidade dos overlays sobre imagens (véu navy) --- */
.sw-overlay.op-4 { opacity: .55; }
.sw-overlay.op-5 { opacity: .62; }
.sw-overlay.op-6 { opacity: .72; }
.sw-overlay.op-7 { opacity: .80; }
.jarallax > .sw-overlay { background: var(--bg-dark-1); }

/* --- Fail-safe das animações de scroll (WOW.js) ---
   O WOW esconde elementos com visibility:hidden até revelar; em páginas longas
   alguns às vezes não disparam e ficam invisíveis ("rodapé/seção não carrega").
   Forçar visibility:visible garante que o conteúdo SEMPRE aparece; a animação
   ainda toca quando entra na viewport. --- */
.wow { visibility: visible !important; opacity: 1 !important; animation-name: none !important; }
footer { position: relative; z-index: 2; }

/* --- Trava de segurança do preloader (#de-loader) ---
   O overlay de carregamento some via JS no evento window.load. Em conexões
   lentas, os scripts (jQuery/designesia) demoram a baixar e a trava JS de 4s
   só começa a contar depois deles — o overlay fica preso cobrindo a tela e o
   usuário acha que "o rodapé/conteúdo não carregou". Esta animação em CSS puro
   não depende de JS: 4s após o CSS aplicar, esconde o overlay e revela o
   conteúdo (que já está renderizado por baixo). Se o JS rodar antes, o fadeOut
   acontece normalmente e esta trava nem chega a agir. --- */
#de-loader { animation: spDeLoaderHide 0s linear 4s forwards; }
@keyframes spDeLoaderHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* --- Header fixo: acompanha a rolagem (menu sempre visível) ---
   Base do template é position:absolute; aqui fixamos no topo. Sobre o hero
   fica transparente; ao rolar (JS adiciona .scrollOn >50px) ganha fundo navy
   para o menu continuar legível sobre o conteúdo claro. --- */
header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  background: rgba(25, 35, 43, 0.82) !important;   /* navy com leve opacidade */
  box-shadow: 0 2px 16px rgba(16, 35, 43, 0.12);
  transition: background .3s ease;
}
/* garante que logo, menu e botões fiquem sempre acima do fundo translúcido
   e visíveis ao rolar (evita o sumiço por compositing) */
header .container, header #logo, header #mainmenu, header .menu_side_area {
  position: relative;
  z-index: 2;
}
header #mainmenu > li > a, header #logo a { color: #fff; }
/* neutraliza o auto-hide por direção de scroll do template
   (.scroll-down puxava o header com margin-top:-90px → sumia ao rolar) */
header.scroll-down, header.nav-up, header.scroll-up { margin-top: 0 !important; }
/* ===== Menu mobile (≤1199px): lista vertical limpa e COMPLETA =====
   O menu mobile do template é position:absolute dentro de header overflow:hidden
   e clipa os itens a partir do que tem submenu. Aqui reescrevemos como lista
   vertical estática, com altura automática e todos os itens visíveis. */
@media (max-width: 1199px) {
  header.header-mobile #mainmenu {
    position: static !important;
    width: 100% !important;
    padding-right: 0 !important;
    display: none;
  }
  header.header-mobile.menu-open {
    background: var(--bg-dark-1) !important;
    height: auto !important;
    max-height: 100vh;
    overflow-y: auto;
  }
  header.header-mobile.menu-open #mainmenu { display: block !important; }
  /* menu ocupa a largura toda, alinhado à esquerda, abaixo do logo/botão */
  header.header-mobile .de-flex { flex-wrap: wrap; }
  header.header-mobile .header-col-mid { width: 100% !important; order: 3; }
  header.header-mobile #mainmenu { margin: 0 !important; text-align: left !important; }
  header.header-mobile #mainmenu li,
  header.header-mobile #mainmenu li ul,
  header.header-mobile #mainmenu li ul li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    position: static !important;
  }
  /* zera a "caixa" do dropdown desktop no mobile (fundo/borda/sombra) */
  header.header-mobile #mainmenu li ul {
    background: none !important; border: none !important; box-shadow: none !important;
    padding-left: 18px !important; min-width: 0 !important; transform: none !important;
    opacity: 1 !important; visibility: visible !important;
    height: auto !important; max-height: none !important; overflow: visible !important;
    margin: 0 !important; left: auto !important; top: auto !important;
  }
  header.header-mobile #mainmenu a {
    display: block !important;
    color: #fff !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  header.header-mobile #mainmenu li ul a { color: rgba(255,255,255,.75) !important; border-bottom: none !important; padding: 8px 0 !important; }
}
/* header mais slim: padding do menu enxuto + logo com altura controlada
   (o logo era quadrado 1000x1000 com muito vazio → recortado e limitado aqui) */
header #mainmenu a { padding-top: 17px !important; padding-bottom: 17px !important; }
header #logo img { height: 50px !important; width: auto !important; max-width: none !important; }

/* --- Cards de blog (grade .row.gy-5): altura igual + linha autor/data
   alinhada no rodapé, independente do tamanho do resumo. --- */
.row.gy-5 > [class*="col-"] { display: flex; }
.row.gy-5 > [class*="col-"] > .hover { display: flex; flex-direction: column; width: 100%; }
.row.gy-5 .hover > .pt-4 { display: flex; flex-direction: column; flex: 1 1 auto; }
.row.gy-5 .hover > .pt-4 > .relative:last-child { margin-top: auto; padding-top: .75rem; }

/* --- Acento dourado MAIS CLARO dentro de blocos escuros (como no IG) --- */
.section-dark .id-color,
.text-light .id-color,
.bg-dark .id-color,
.section-dark .subtitle,
.text-light .subtitle { color: #cda063 !important; }

.text-light a:hover,
.section-dark a:hover { color: #b88a4f !important; }

/* === Imagens com width/height: manter a proporção (não fixar a altura do atributo).
   Reserva o espaço da imagem antes de carregar → elimina o "pulo" de layout (CLS)
   que fazia o conteúdo/rodapé "fugir" e parecer que o rodapé não carregava. === */
img[width][height] { height: auto; }

/* ===================== AJUSTES MOBILE (≤767px) ===================== */
@media (max-width: 767px) {

  /* --- Carrossel de diferenciais: tirar título e tags de CIMA da imagem ---
     No celular a imagem fica limpa: título acima, imagem no meio, tags (chips) abaixo. */
  #projects-carousel .item a.text-light { color: var(--bg-dark-1) !important; }
  #projects-carousel .item .abs.w-50 {
    position: static !important; width: 100% !important;
    padding: 0 0 .25rem 0 !important; margin: 0 !important; z-index: auto !important;
  }
  #projects-carousel .item .abs.w-50 h2 {
    font-size: 1.35rem !important; line-height: 1.18 !important; color: var(--bg-dark-1) !important;
  }
  #projects-carousel .item img.abs.w-80px { display: none !important; }   /* seta decorativa */
  #projects-carousel .item .gradient-edge-top { display: none !important; }
  #projects-carousel .item .extra-text {
    position: static !important; margin: .7rem 0 0 0 !important;
    flex-wrap: wrap !important; gap: .45rem; line-height: 1.3 !important;
  }
  #projects-carousel .item .extra-text .bg-blur {
    background: rgba(151,104,47,.10) !important; backdrop-filter: none !important;
    color: var(--bg-dark-1) !important; border: 1px solid rgba(151,104,47,.40);
    border-radius: 999px; padding: .4rem .8rem !important; margin: 0 !important;
    font-size: .82rem; white-space: nowrap;
  }

  /* --- Rodapé compacto no celular (estrutura nova: grade flex) --- */
  footer { padding-top: 2.25rem !important; }
  footer .footer-grid { display: flex; flex-wrap: wrap; gap: 1.1rem 1.4rem; }
  footer .footer-nav, footer .footer-areas { flex: 0 0 calc(50% - .7rem); margin: 0 !important; }
  footer .footer-contato { flex: 1 1 100%; margin: .4rem 0 0 !important; }
  footer .spacer-20 { height: 8px !important; }
  footer .widget h2.hs-5 { font-size: .92rem !important; letter-spacing: .03em; margin-bottom: .4rem !important; }
  footer .widget ul li { line-height: 1.5 !important; font-size: .9rem; }
  footer .d-flex.align-items-center > h2 { font-size: 1.05rem !important; }   /* "Fale com a gente" */
  footer img.w-60px { width: 34px !important; }
  footer .widget .op-5.fs-15 { font-size: .8rem !important; margin-top: .15rem; }
  footer h3 { font-size: 1rem !important; line-height: 1.35 !important; margin-bottom: 0 !important; }
  footer .subfooter { margin-top: 1.1rem; }
  footer .subfooter-row { flex-direction: column; gap: .6rem; text-align: center; }
  footer .subfooter .container { padding-top: .6rem; padding-bottom: .6rem; }
}

/* === Rodapé "Fale com a gente": igualar as fontes ao restante do rodapé ===
   Título = "NAVEGAÇÃO" (~18px); e-mail/WhatsApp/endereço = links (~16px).
   Fora do @media e ao fim do arquivo → vale em todos os tamanhos. */
footer .d-flex.align-items-center > h2 { font-size: 18px !important; line-height: 1.3; margin: 0; }
footer .widget h3 { font-size: 16px !important; line-height: 1.5; font-weight: 600; }
/* Seta "Fale com a gente": clicável → Contato, menor e com hover */
footer img.w-60px { width: 30px !important; }
footer a.footer-cta-arrow { display: inline-flex; transition: transform .2s; }
footer a.footer-cta-arrow:hover { transform: translate(2px, -2px); }
footer a.footer-cta-arrow:hover img { opacity: 1 !important; }

/* === Realce de hover nos botões principais (mesmo efeito do card) =======
   "Falar com o escritório" (.btn-main) e "Ver como podemos ajudar" (.btn-line)
   sobem 3px e ganham sombra de elevação ao passar o mouse, mantendo a troca
   de cor do template. Vale no site inteiro. */
a.btn-main, .btn-main, a.btn-line, .btn-line {
  transition: transform .25s ease, box-shadow .25s ease, background-color .3s ease, color .3s ease;
}
a.btn-main:hover, .btn-main:hover, a.btn-line:hover, .btn-line:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .45);
}

/* === Realce de hover nos ícones circulares dourados ====================
   Mesmo efeito do card/botões: sobem levemente e ganham sombra. Cobre os
   ícones do processo ("Você fala / O escritório escuta…", no index e nas
   páginas de área) e as setas dos carrosséis (Owl), no site inteiro. */
.de-step-icon { transition: transform .25s ease, box-shadow .25s ease; }
.de-step:hover .de-step-icon,
.de-step-icon:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px -8px rgba(151, 104, 47, .5); /* sombra dourada suave */
}
/* setas customizadas dos carrosséis: o círculo é o pseudo :before de
   .d-prev/.d-next (dentro de .de-custom-nav). Mesmo realce: sobe + acende + sombra. */
.de-custom-nav .d-prev:before, .de-custom-nav .d-next:before {
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease, background .25s ease;
}
.de-custom-nav .d-prev:hover:before, .de-custom-nav .d-next:hover:before {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .45);
}
/* (as setas .owl-prev/.owl-next ficam display:none neste tema) */

/* === Realce de hover no menu e nas logomarcas (menu + rodapé) ==========
   Mesma lógica: leve subida ao passar o mouse. */
#mainmenu a.menu-item { transition: transform .2s ease, color .2s ease; }
#mainmenu a.menu-item:hover { transform: translateY(-2px); }

#logo a, footer .footer-logo-link { display: inline-block; transition: transform .25s ease; }
#logo a:hover, footer .footer-logo-link:hover { transform: translateY(-2px) scale(1.03); }

/* Abas de área (FAQ / .de-tab): realce de hover nas abas INATIVAS para
   sinalizar que são clicáveis (fundo dourado suave + texto dourado + leve subida).
   A aba ativa mantém o dourado preenchido. */
.de-tab .d-tab-nav li { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.de-tab .d-tab-nav li:not(.active-tab):hover {
  background: rgba(151, 104, 47, .12);
  color: var(--primary-color);
  transform: translateY(-1px);
}

/* Cards de imagem dos carrosséis (Áreas / diferenciais): destacáveis no hover,
   como os botões (sobe + sombra). O palco do Owl tem overflow:hidden e cortaria
   o efeito → liberamos só o eixo vertical (clip no horizontal evita vazamento). */
#services-carousel .owl-stage-outer, #projects-carousel .owl-stage-outer { overflow-x: clip; overflow-y: visible; }
#services-carousel .item, #projects-carousel .item { transition: transform .3s ease, box-shadow .3s ease; border-radius: 12px; }
#services-carousel .item > .hover > .relative.overflow-hidden,
#projects-carousel .item > .hover > .relative.overflow-hidden { border-radius: 12px; }
#services-carousel .item:hover, #projects-carousel .item:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 44px -16px rgba(25, 35, 43, .55);
}

/* Cards de imagem do BLOG (home + página do blog): destacáveis no hover, como os
   botões/cards. As capas do blog usam .hover-scale-1-1 → escopo seguro via :has(). */
.relative.overflow-hidden.rounded-1:has(> img.hover-scale-1-1) { transition: transform .3s ease, box-shadow .3s ease; }
.hover:hover .relative.overflow-hidden.rounded-1:has(> img.hover-scale-1-1) {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -16px rgba(25, 35, 43, .45);
}

/* === Diferenciação CTA ("Fale com o escritório") × rodapé =============
   Antes os dois usavam o mesmo navy (#19232b) e se fundiam. Aqui o rodapé
   recebe um navy mais fundo + um filete dourado no topo (linha divisória),
   criando um degrau tonal claro sem mexer no HTML nem nas outras seções. */
footer { background: #131b22 !important; border-top: 1px solid rgba(184, 138, 79, .22); }

/* === Estrutura nova do rodapé (3 colunas no topo + logo na base) =======
   - NAVEGAÇÃO e ÁREAS próximas; "Fale com a gente" vira card destacado.
   - Logo movida para a faixa inferior, ao lado do copyright e das redes. */
footer .footer-grid { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0; }
footer .footer-grid > .widget { margin-bottom: 0; }
/* NAVEGAÇÃO → ÁREAS: espaço reduzido (~metade do anterior). */
footer .footer-nav { margin-right: 4.5rem; }
footer .footer-areas { margin-right: 2.5rem; }

/* Card "Fale com a gente": cor distinta + ocupa todo o espaço de Áreas até a
   borda direita (flex-grow) e estica até a altura das colunas. Os 3 contatos
   se distribuem com space-between → o endereço ancora na linha de "Contato". */
footer .footer-contato {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(184, 138, 79, .3);
  border-radius: 14px;
  box-shadow: inset 3px 0 0 0 #b88a4f; /* filete dourado na lateral esquerda */
  padding: .85rem 1.6rem 1rem;
  min-width: 300px;
  margin-top: -18px; /* sobe o card p/ o título alinhar com NAVEGAÇÃO/ÁREAS */
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
footer .footer-contato .d-flex { margin-bottom: .35rem; }
/* Título do card em dourado */
footer .footer-contato .d-flex > h2 { color: #cda063 !important; letter-spacing: .04em; }
/* Realce AO PASSAR O MOUSE: o card "acende" e levanta levemente */
footer .footer-contato:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(184, 138, 79, .65);
  box-shadow: inset 3px 0 0 0 #b88a4f, 0 16px 38px -12px rgba(0, 0, 0, .55);
  transform: translateY(-3px);
}
footer .footer-contato .contato-lista {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 35px;
}
footer .footer-contato .contato-item h3 { margin: 0; }
footer .footer-contato .contato-item .op-5.fs-15 { margin: 0; line-height: 1.2; }

/* Faixa inferior: logo + copyright + redes na mesma linha */
footer .subfooter-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
footer .footer-logo { width: 88px; height: auto; opacity: .92; }
footer .subfooter-copy { font-size: 13px; opacity: .8; }
footer .subfooter .social-icons { margin: 0 !important; }
footer .subfooter .social-icons a { font-size: 16px; opacity: .8; margin-left: .55rem; }

/* === Rodapé compacto e discreto (DESKTOP) — reduz a respiração vertical
   sem mexer no template (style.css usa padding-top:100px). */
@media (min-width: 768px) {
  footer { padding-top: 52px !important; }
  footer .widget h2.hs-5 { margin-bottom: .55rem !important; letter-spacing: .02em; opacity: .92; }
  footer .widget ul li { line-height: 1.6 !important; }
  footer .d-flex.align-items-center > h2 { font-size: 16px !important; opacity: .95; }
  footer .widget .op-5.fs-15 { font-size: 12px !important; }
  footer .widget h3 { font-size: 15px !important; line-height: 1.35; }
  footer .subfooter { margin-top: 24px !important; }
  footer .subfooter .container { padding-top: 12px; padding-bottom: 12px; }
}