/* ==========================================================================
   BARIJAN — blocos do tema (páginas de serviço + shortcodes usados na home)

   Os tokens abaixo NÃO são um sistema próprio: são os valores que o site já
   usa no Elementor (Open Sans, preto/branco/#eee, verde só no WhatsApp,
   container de 1300px). A ideia é que estas páginas não pareçam de outro site.
   Open Sans já vem carregada pelo Elementor em todos os pesos — não importar.
   ========================================================================== */

:root{
  --preto:#000;
  --branco:#fff;
  --seccao:#eee;      /* fundo de seção alternada — o mesmo do bloco de depoimentos */
  --texto:#7a7a7a;    /* cor "Texto" do Kit do Elementor */
  --linha:#e3e3e3;
  --wa:#25d366;       /* verde: só WhatsApp */
  --fonte:"Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease:.3s cubic-bezier(.2,.7,.3,1);
}

/* base */
.barijan-container{ max-width:1300px; margin:0 auto; padding:0 24px; }

/* ==========================================================================
   MENU — dropdown do submenu (Elementor Nav Menu).
   O submenu vem com display:none e o hover do Elementor não estava revelando;
   forçamos abrir no hover (desktop) e no foco por teclado. O menu mobile
   (.elementor-nav-menu--dropdown) tem toggle próprio e fica de fora.
   ========================================================================== */
.elementor-nav-menu--main li.menu-item-has-children:hover > .sub-menu,
.elementor-nav-menu--main li.menu-item-has-children:focus-within > .sub-menu,
.elementor-nav-menu:not(.elementor-nav-menu--dropdown) li.menu-item-has-children:hover > .sub-menu{
  display:block !important;
}

/* Título de seção — espelha o h2 do Elementor: 35px, caixa-alta, preto,
   centralizado, com a palavra de destaque em bold. */
.barijan-titulo{
  font-family:var(--fonte); font-weight:500; text-transform:uppercase;
  font-size:clamp(1.6rem,3.2vw,2.19rem); line-height:1.1; letter-spacing:normal;
  text-align:center; color:var(--preto); margin:0 0 40px;
}
.barijan-titulo b,.barijan-titulo strong{ font-weight:700; }
.barijan-titulo--claro{ color:var(--branco); }

/* ==========================================================================
   CORREÇÃO PONTUAL — botão "Fale Conosco" do cabeçalho
   O texto quebrava em duas linhas partindo o telefone ("99630-" / "1476").
   Única regra do tema que toca o Elementor, e de propósito: é um defeito de
   exibição que não dá pra resolver pelas opções do widget.
   ========================================================================== */
.elementor-location-header .elementor-button{ white-space:nowrap; }
@media(max-width:400px){
  .elementor-location-header .elementor-button{ font-size:.82rem; padding-left:14px; padding-right:14px; }
}

/* ==========================================================================
   HERO das páginas de serviço (faixa com foto + véu preto + breadcrumb)
   ========================================================================== */
.barijan-hero{
  position:relative; overflow:hidden; color:var(--branco); font-family:var(--fonte);
  background:#000 center/cover no-repeat; padding:78px 0 70px;
}
.barijan-hero::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 48%,rgba(0,0,0,.5) 100%); }
.barijan-hero .bh-in{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.barijan-hero h1{
  font-family:var(--fonte); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.15; letter-spacing:normal; margin:0 0 10px;
}
.barijan-hero p{ margin:0; color:#d6d6d6; font-size:1rem; line-height:1.6; max-width:640px; }
.bh-crumb{ flex:0 0 auto; font-size:.85rem; color:#d6d6d6; display:flex; align-items:center; gap:8px; padding-bottom:4px; }
.bh-crumb a{ color:#d6d6d6; text-decoration:none; transition:var(--ease); }
.bh-crumb a:hover{ color:var(--branco); }
.bh-crumb [aria-current]{ color:var(--branco); }
@media(max-width:820px){
  .barijan-hero{ padding:54px 0 48px; }
  .barijan-hero .bh-in{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ==========================================================================
   GRADE DE SERVIÇOS — mesma anatomia do card de serviço da home:
   imagem em cima, faixa branca com título e botão preto retangular.
   ========================================================================== */
.barijan-servicos-arquivo{ padding:64px 0; background:var(--branco); font-family:var(--fonte); }
/* 2 por linha: são só 4 serviços, e em 3 colunas sobrava um card sozinho na
   segunda linha. Com 2 colunas fecham duas linhas cheias. */
.barijan-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.barijan-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--branco); box-shadow:0 1px 10px rgba(0,0,0,.09); transition:var(--ease);
}
.barijan-card:hover{ box-shadow:0 10px 30px rgba(0,0,0,.16); }
.barijan-card-img{ aspect-ratio:16/10; overflow:hidden; background:#e6e6e6; }
.barijan-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:var(--ease); }
.barijan-card:hover .barijan-card-img img{ transform:scale(1.04); }
.barijan-card-body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.barijan-card-titulo{
  font-family:var(--fonte); font-size:1.25rem; font-weight:600; letter-spacing:-.6px;
  color:var(--preto); line-height:1.25; margin:0 0 12px;
}
.barijan-card-desc{ margin:0 0 24px; color:var(--texto); font-size:.95rem; line-height:1.7; flex:1; }
/* botão preto com seta: é o que o site usa no card de serviço da home */
.barijan-card-link{
  align-self:flex-start; display:inline-flex; align-items:center; gap:20px;
  background:var(--preto); color:var(--branco); font-size:.88rem; font-weight:600;
  padding:12px 22px; transition:var(--ease);
}
.barijan-card-link i{ font-style:normal; transition:var(--ease); }
.barijan-card:hover .barijan-card-link i{ transform:translateX(4px); }

/* ==========================================================================
   DETALHE DO SERVIÇO
   ========================================================================== */
.barijan-servico{ padding:64px 0 8px; font-family:var(--fonte); }

/* chamada de abertura: título alinhado à esquerda + texto em largura cheia */
.bs-headline{
  font-family:var(--fonte); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.35rem,2.6vw,1.75rem); line-height:1.25; letter-spacing:normal;
  color:var(--preto); margin:0 0 22px;
}
.barijan-servico-desc{ font-size:1.02rem; line-height:1.75; color:var(--texto); }
.barijan-servico-desc p{ margin:0 0 16px; }
.bs-linha{ border:0; border-top:1px solid var(--linha); margin:40px 0 38px; }

/* duas colunas: lista "Executamos" à esquerda, grade de fotos à direita */
.bs-grid{ display:grid; grid-template-columns:minmax(200px,.42fr) 1fr; gap:52px; align-items:start; }
.bs-executamos-titulo{
  font-family:var(--fonte); font-size:1.05rem; font-weight:700; text-transform:uppercase;
  color:var(--preto); letter-spacing:normal; margin:0 0 18px;
}
.bs-executamos ul{ list-style:none; margin:0; padding:0; }
.bs-executamos li{ color:#4a4a4a; font-size:.98rem; line-height:1.5; margin-bottom:13px; padding-left:14px; position:relative; }
.bs-executamos li::before{ content:"·"; position:absolute; left:0; color:var(--preto); font-weight:700; }

/* galeria clicável (abre no lightbox) — grade de 3 colunas de fotos quadradas,
   como no padrão que o cliente aprovou; funciona com qualquer quantidade */
.barijan-galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-content:start; }
.barijan-galeria-item{ display:block; position:relative; cursor:zoom-in; overflow:hidden; }
.barijan-galeria-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:var(--ease); }
.barijan-galeria-item:hover img{ transform:scale(1.05); }
/* affordance de "clique para ampliar" */
.barijan-galeria-item::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.28);
  opacity:0; transition:var(--ease);
}
.barijan-galeria-item:hover::after,.barijan-galeria-item:focus-visible::after{ opacity:1; }
.barijan-galeria-item:focus-visible{ outline:3px solid var(--preto); outline-offset:2px; }
/* CTA centralizado abaixo do bloco, como na referência */
.barijan-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:56px 0 64px; }
.barijan-btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 34px;
  font-family:var(--fonte); font-size:.95rem; font-weight:700; text-decoration:none; transition:var(--ease);
}
.barijan-btn--preto{ background:var(--preto); color:var(--branco); }
.barijan-btn--preto:hover{ background:#222; }
.barijan-btn--wa{ background:var(--wa); color:var(--branco); }
.barijan-btn--wa:hover{ filter:brightness(.95); }
.barijan-btn svg{ flex:0 0 auto; width:20px; height:20px; }

/* ==========================================================================
   NOSSOS DIFERENCIAIS — faixa preta com quadro de até 3 colunas separadas por
   linha vertical. O conteúdo vem do campo "diferenciais" de cada serviço, então
   o número de colunas varia: auto-fit para não sobrar coluna vazia.
   ========================================================================== */
.bs-diferenciais{ background:var(--preto); color:var(--branco); padding:56px 0 62px; font-family:var(--fonte); }
.bs-diferenciais h2{
  font-family:var(--fonte); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.35rem,2.6vw,1.75rem); line-height:1.2; letter-spacing:normal;
  color:var(--branco); margin:0 0 6px;
}
.bs-dif-sub{ margin:0 0 30px; color:#cfcfcf; text-transform:uppercase; font-size:.92rem; letter-spacing:.01em; }
/* os três painéis não têm borda: o que separa é o tom, que vai clareando da
   esquerda para a direita (valores tirados do mockup do cliente) */
.bs-dif-quadro{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.bs-dif-col{ list-style:none; margin:0; padding:24px 26px; background:#515151; }
.bs-dif-col:first-child{ background:#262624; }
.bs-dif-col:nth-child(2){ background:#444442; }
.bs-dif-col li{
  position:relative; padding-left:16px; margin-bottom:14px;
  text-transform:uppercase; font-weight:700; font-size:.88rem; line-height:1.4; color:var(--branco);
}
.bs-dif-col li:last-child{ margin-bottom:0; }
.bs-dif-col li::before{ content:"•"; position:absolute; left:0; color:var(--branco); }

/* ==========================================================================
   CHAMADA final de WhatsApp (antes dos depoimentos)
   ========================================================================== */
.bs-chamada{ background:var(--branco); padding:56px 0 60px; font-family:var(--fonte); text-align:center; }
.bs-chamada h2{
  font-family:var(--fonte); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.35rem,2.6vw,1.75rem); line-height:1.25; letter-spacing:normal;
  color:var(--preto); margin:0 0 8px;
}
.bs-chamada p{ margin:0 0 30px; color:#4a4a4a; text-transform:uppercase; font-size:.92rem; line-height:1.5; }
.bs-chamada .barijan-btn{ padding:18px 40px; font-size:1.02rem; text-transform:uppercase; }

/* ==========================================================================
   LIGHTBOX da galeria
   ========================================================================== */
.barijan-lightbox{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.94); align-items:center; justify-content:center; }
.barijan-lightbox.is-open{ display:flex; }
body.bl-open{ overflow:hidden; }
.bl-img{ max-width:min(88vw,1100px); max-height:82vh; object-fit:contain; }
.bl-close,.bl-prev,.bl-next{ position:absolute; background:transparent; border:0; color:var(--branco); cursor:pointer; line-height:1; transition:var(--ease); font-family:var(--fonte); }
.bl-close:hover,.bl-prev:hover,.bl-next:hover{ opacity:.6; }
.bl-close{ top:20px; right:24px; font-size:2.4rem; }
.bl-prev,.bl-next{ top:50%; transform:translateY(-50%); font-size:3.2rem; padding:8px 14px; }
.bl-prev{ left:8px; } .bl-next{ right:8px; }
.bl-count{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#ccc; font-family:var(--fonte); font-size:.85rem; }
@media(max-width:640px){
  .bl-prev,.bl-next{ font-size:2.2rem; padding:6px 10px; }
  .bl-close{ top:12px; right:14px; font-size:2rem; }
}

/* ==========================================================================
   DEPOIMENTOS — faixa PRETA com nomes brancos, para dar destaque.
   Aplica-se em TODO lugar onde o bloco aparece: páginas de serviço
   (.barijan-depoimentos, via [barijan_contato]) e a seção da HOME montada
   no Elementor (#depoimentos). Os dois usam o mesmo listing 262.
   ========================================================================== */
.barijan-depoimentos{ background:#000; padding:64px 0; font-family:var(--fonte); }
#depoimentos{ background:#000 !important; }
.barijan-depoimentos .barijan-titulo{ color:#fff; }
/* item transparente sobre o preto (sem card/painel) */
:is(.barijan-depoimentos,#depoimentos) .jet-listing-grid__item{ background:transparent; border:0; }
:is(.barijan-depoimentos,#depoimentos) .jet-listing-grid__item .elementor-widget-wrap,
:is(.barijan-depoimentos,#depoimentos) .jet-listing-grid__item .elementor-element-populated{ background:transparent !important; border:0 !important; box-shadow:none !important; }
/* TEXTO do depoimento = balão BRANCO com texto escuro */
:is(.barijan-depoimentos,#depoimentos) .jet-listing-dynamic-field__content{ background:#fff !important; color:#333 !important; padding:26px 24px !important; border-radius:6px; margin-bottom:22px; }
:is(.barijan-depoimentos,#depoimentos) .jet-listing-dynamic-field__content *{ color:#333 !important; }
/* nome (1º heading) branco; cargo (heading seguinte) cinza-claro — sobre o preto */
:is(.barijan-depoimentos,#depoimentos) .elementor-heading-title{ color:#fff !important; }
:is(.barijan-depoimentos,#depoimentos) .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title{ color:#b3b3b3 !important; font-weight:400; }

/* --- ALINHAMENTO DAS COLUNAS ---------------------------------------------
   Cada depoimento tem um texto de tamanho diferente, então o balão branco
   ficava com altura própria e empurrava o bloco de avatar/nome para uma
   altura diferente em cada coluna. A correção estica o item inteiro e deixa
   só o balão crescer: os balões terminam todos na mesma linha e os autores
   ficam alinhados. A cadeia é longa porque é preciso repassar a altura por
   todos os wrappers que o Elementor gera entre o item e o texto.
   ------------------------------------------------------------------------ */
/* O bloco roda de dois jeitos e cada um precisa de um caminho diferente:
   - página de serviço: grade normal; basta o wrapper virar flex para os itens
     de uma mesma linha esticarem juntos;
   - home: o MESMO listing roda como carrossel do slick, que posiciona os
     slides sozinho. Forçar flex no wrapper ali empilha tudo — por isso o
     :not(.slick-slider). No carrossel, a altura igual se resolve no track. */
:is(.barijan-depoimentos,#depoimentos) .jet-listing-grid__items:not(.slick-slider){ display:flex; flex-wrap:wrap; align-items:stretch; }
:is(.barijan-depoimentos,#depoimentos) .slick-track{ display:flex !important; align-items:stretch; }
:is(.barijan-depoimentos,#depoimentos) .slick-slide{ height:auto !important; }
:is(.barijan-depoimentos,#depoimentos) .jet-listing-grid__item{ display:flex; float:none; }
:is(.barijan-depoimentos,#depoimentos) .jet-listing-grid__item > .elementor{ flex:1; display:flex; flex-direction:column; }
/* 1ª seção = o balão (cresce); 2ª seção = avatar + nome (mantém o tamanho) */
:is(.barijan-depoimentos,#depoimentos) .jet-listing-grid__item > .elementor > .elementor-section:first-child{ flex:1; display:flex; flex-direction:column; }
:is(.barijan-depoimentos,#depoimentos) .jet-listing-grid__item > .elementor > .elementor-section:first-child :is(
  .elementor-container,
  .elementor-column,
  .elementor-widget-wrap,
  .elementor-widget-jet-listing-dynamic-field,
  .elementor-widget-container,
  .jet-listing-dynamic-field,
  .jet-listing-dynamic-field__inline-wrap
){ display:flex; flex-direction:column; flex:1 1 auto; width:100%; }
:is(.barijan-depoimentos,#depoimentos) .jet-listing-dynamic-field__content{ flex:1; }

/* --- CARROSSEL NO MOBILE (só nas páginas de serviço) ----------------------
   Empilhados, os 3 depoimentos ocupam uma tela inteira de rolagem no celular.
   Aqui viram um carrossel deslizante por scroll-snap: nativo, sem depender do
   slick — que, fora de página do Elementor, não inicializa (foi por isso que o
   `carousel_enabled` do JetEngine ficou desligado em barijan_depoimentos_html).
   A home fica de fora: lá o bloco já é carrossel do slick.
   ------------------------------------------------------------------------ */
@media(max-width:767px){
  /* o !important no flex-wrap não é preguiça: a regra de alinhamento acima usa
     :is(.barijan-depoimentos,#depoimentos), e :is() assume a especificidade do
     argumento mais forte — o ID. Seletor com ID vence qualquer quantidade de
     classes, então sem !important o wrap do desktop venceria aqui. */
  .barijan-depoimentos .jet-listing-grid__items:not(.slick-slider){
    flex-wrap:nowrap !important; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px;
  }
  .barijan-depoimentos .jet-listing-grid__items::-webkit-scrollbar{ display:none; }
  .barijan-depoimentos .jet-listing-grid__item{ flex:0 0 86%; scroll-snap-align:center; }
  /* bolinhas de posição */
  .bd-dots{ display:flex; justify-content:center; gap:9px; margin-top:22px; }
  .bd-dots button{
    width:9px; height:9px; padding:0; border:0; border-radius:50%;
    background:#585858; cursor:pointer; transition:var(--ease);
  }
  .bd-dots button[aria-current="true"]{ background:var(--branco); }
}
@media(min-width:768px){ .bd-dots{ display:none; } }

/* fallback: só entra em cena se o listing do JetEngine não renderizar */
.barijan-depo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.barijan-depo-card{ background:transparent; padding:10px; margin:0; }
.barijan-depo-texto{ color:#eaeaea; margin:0 0 20px; line-height:1.75; font-size:.95rem; }
.barijan-depo-texto p{ margin:0 0 10px; }
.barijan-depo-nome{ display:block; font-weight:700; color:#fff; font-size:1rem; }
.barijan-depo-cargo{ display:block; color:#b3b3b3; font-size:.82rem; margin-top:4px; }

/* ==========================================================================
   FORMULÁRIO / MAPA (bloco [barijan_contato] e [barijan_mapa])
   ========================================================================== */
.barijan-form{ padding:64px 0; background:var(--seccao); font-family:var(--fonte); }
.barijan-mapa{ line-height:0; }
.barijan-mapa iframe{ display:block; }
/* o form do Elementor embutido precisa caber no mobile sem estourar a página */
.barijan-contato,.barijan-form{ overflow:hidden; }
.barijan-form .elementor,.barijan-form .elementor-section,.barijan-form .elementor-container{ max-width:100% !important; }

/* A seção "Nós podemos te ajudar!" tem foto de fundo e precisa ir de ponta a
   ponta. O bloco é renderizado FORA do .barijan-container (ver shortcodes.php)
   para o fundo ocupar a largura toda; aqui o conteúdo volta a 1300px, senão o
   texto e o formulário esticariam junto com a foto. */
.barijan-form-tpl > .elementor > .elementor-section > .elementor-container{
  max-width:1300px !important; margin-left:auto; margin-right:auto;
  padding-left:24px; padding-right:24px;
}
@media(max-width:680px){
  .barijan-form-tpl > .elementor > .elementor-section > .elementor-container{ padding-left:18px; padding-right:18px; }
}
.barijan-form input,.barijan-form select,.barijan-form textarea,.barijan-form .elementor-field-group{ max-width:100%; }
@media(max-width:900px){
  .barijan-form .elementor-container{ flex-wrap:wrap !important; }
  .barijan-form .elementor-column{ width:100% !important; flex:0 0 100% !important; max-width:100% !important; }
}

/* ==========================================================================
   CARD DE SERVIÇO DA HOME (listing 311 do JetEngine)
   O botão "Saiba mais" estava em "justify", ocupando os 60% da coluna dele, e
   encostava no título — que quebra em duas linhas em todos os serviços. Aqui o
   título ganha espaço e o botão passa a ter a largura do próprio texto.
   Precisa de !important nas colunas porque a largura vem do CSS que o Elementor
   gera para o listing, com especificidade maior.
   ========================================================================== */
@media(min-width:768px){
  .jet-listing-grid--311 .elementor-column.elementor-element-d75b6a0{ width:58% !important; }
  .jet-listing-grid--311 .elementor-column.elementor-element-043b090{ width:42% !important; }
}
.jet-listing-grid--311 .elementor-widget-button.elementor-align-justify .elementor-button{ width:auto; }
.jet-listing-grid--311 .elementor-widget-button.elementor-align-justify{ text-align:right; }

/* ==========================================================================
   CLIENTES — carrossel automático. Renderiza na HOME via [barijan_clientes].
   ========================================================================== */
.barijan-clientes{ padding:56px 0; background:var(--branco); font-family:var(--fonte); }
.barijan-carousel{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.barijan-track{ display:flex; align-items:center; gap:60px; width:max-content; animation:barijan-scroll 36s linear infinite; }
.barijan-carousel:hover .barijan-track{ animation-play-state:paused; }
/* ==========================================================================
   CATEGORIA DE SERVIÇO (páginas Residencial / Comercial) — 2 colunas:
   texto + lista + botão à esquerda, galeria de fotos à direita.
   ========================================================================== */
.barijan-categoria{ padding:64px 0; background:var(--branco); font-family:var(--fonte); }
.bc-grid{ display:grid; grid-template-columns:minmax(280px,0.9fr) 1.3fr; gap:48px; align-items:start; }
.bc-titulo{ font-size:44px; line-height:1.1; font-weight:800; color:#111; margin:0 0 22px; }
.barijan-prose{ color:#555; line-height:1.85; font-size:1rem; }
.barijan-prose p{ margin:0 0 16px; }
.barijan-prose ul{ margin:16px 0 0; padding-left:20px; list-style:disc; }
.barijan-prose li{ margin:7px 0; }
.bc-cta{ display:inline-flex; align-items:center; gap:10px; margin-top:30px; background:#25D366; color:#fff;
  font-weight:600; padding:14px 28px; border-radius:6px; text-transform:uppercase; letter-spacing:.02em; transition:var(--ease); }
.bc-cta:hover{ filter:brightness(.94); }
.bc-galeria{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.bc-foto{ margin:0; }
.bc-foto img{ width:100%; height:180px; object-fit:cover; display:block; border-radius:4px; }
@media(max-width:900px){
  .bc-grid{ grid-template-columns:1fr; gap:34px; }
  .bc-titulo{ font-size:34px; }
  .bc-galeria{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
}

/* logos COLORIDAS (sem grayscale/esmaecido), mesmo tamanho; seguem passando sozinhas */
.barijan-slide img{ max-height:60px; width:auto; object-fit:contain; transition:var(--ease); }
.barijan-slide img:hover{ opacity:.85; }
@keyframes barijan-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media(max-width:1024px){
  .barijan-cards{ gap:24px; }
  .barijan-depo-grid{ grid-template-columns:1fr 1fr; }
  .bs-grid{ grid-template-columns:1fr; gap:34px; }
  .barijan-galeria{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:680px){
  .barijan-cards,.barijan-depo-grid{ grid-template-columns:1fr; }
  .barijan-cta{ flex-direction:column; align-items:stretch; }
  .barijan-btn{ justify-content:center; }
  .barijan-container{ padding:0 18px; }
  .barijan-servicos-arquivo,.barijan-depoimentos,.barijan-form{ padding:48px 0; }
  .barijan-galeria{ grid-template-columns:repeat(2,1fr); gap:14px; }
  /* quadro dos diferenciais empilha; os painéis continuam encostados um no
     outro e cada um mantém o MESMO padding em cima e embaixo — o que separa
     visualmente continua sendo o tom de fundo, como no desktop */
  .bs-dif-quadro{ grid-template-columns:1fr; }
  .bs-dif-col{ padding:20px 22px; }
  .bs-diferenciais,.bs-chamada{ padding:44px 0; }
  .bs-chamada .barijan-btn{ padding:16px 24px; font-size:.95rem; }
}

/* ==========================================================================
   Botão flutuante do WhatsApp (substitui o plugin Joinchat)
   Medidas copiadas do joinchat-btn.css para o botão não "pular de lugar" na
   troca: 60px, 28px de folga (o plugin usava 20px no wrapper + 8px no botão),
   verde --wa, hover #128c7e e a mesma sombra.
   ========================================================================== */
.barijan-whats{
  position:fixed; z-index:9000; right:28px; bottom:28px;
  display:flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:50%;
  background:var(--wa); color:var(--branco);
  box-shadow:1px 6px 24px 0 rgba(7,94,84,.24);
  transition:background-color .2s linear;
  /* button_delay do plugin era 3s */
  animation:barijan-whats-entra .5s cubic-bezier(.18,.89,.32,1.28) 3s both;
  -webkit-tap-highlight-color:transparent;
}
.barijan-whats:hover,.barijan-whats:focus-visible{ background:#128c7e; color:var(--branco); }
.barijan-whats:focus-visible{ outline:3px solid var(--branco); outline-offset:3px; }
.barijan-whats__ico{ display:block; pointer-events:none; }

/* balãozinho "Posso ajudar?" — aparece aos 5s e some aos 25s, como no plugin */
.barijan-whats__tip{
  position:absolute; right:calc(100% + 16px); top:50%; transform:translateY(-50%);
  height:32px; line-height:32px; padding:0 14px; border-radius:16px;
  background:var(--branco); color:rgba(0,0,0,.8);
  font:normal 16px/32px var(--fonte); white-space:nowrap;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.4)); pointer-events:none; opacity:0;
  animation:barijan-whats-tip 20s linear 5s both;
}
.barijan-whats__tip::after{
  content:""; position:absolute; top:10px; right:-8px;
  border:6px solid transparent; border-width:6px 0 6px 8px; border-left-color:var(--branco);
}
@keyframes barijan-whats-entra{ from{ transform:scale(0); } to{ transform:scale(1); } }
/* 5% de 20s = 1s para surgir; some no último 5% */
@keyframes barijan-whats-tip{ 0%,100%{ opacity:0; } 5%,95%{ opacity:1; } }

@media(max-width:480px){
  .barijan-whats{ right:18px; bottom:18px; width:54px; height:54px; }
  .barijan-whats__ico{ width:32px; height:32px; }
  /* em tela estreita o balão espremia o botão contra a borda */
  .barijan-whats__tip{ display:none; }
}

/* escopo restrito aos blocos deste tema: mexer com * !important quebraria
   as animações do próprio Elementor (menu mobile, carrossel de banners) */
@media(prefers-reduced-motion:reduce){
  .barijan-track{ animation:none; }
  .barijan-card,.barijan-card img,.barijan-card-link i,
  .barijan-btn,.barijan-depo-card,.barijan-slide img,
  .bh-crumb a,.bl-close,.bl-prev,.bl-next{ transition:none; }
  /* o botão não pode depender da animação para existir: sem ela, opacity/scale
     ficariam no estado inicial e ele sumiria da tela */
  .barijan-whats{ animation-duration:1ms; animation-delay:0s; }
  .barijan-whats__tip{ animation:none; opacity:1; }
}