.elementor-kit-2117{--e-global-color-primary:#0040B8;--e-global-color-secondary:#002E85;--e-global-color-text:#181818;--e-global-color-accent:#E00828;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;}.elementor-kit-2117 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --azul-marca:#0040B8; --azul-escuro:#002E85; --vermelho-urgencia:#E00828; --vermelho-escuro:#B00620; --grafite:#181818; --cinza-texto:#4A4F57; --cinza-fundo:#F2F4F7; --branco:#FFFFFF; --fonte-titulo:Archivo; --fonte-corpo:Inter; }
/* Start custom CSS *//* ===============================================================
   CSS global do site (Ajustes do site > CSS personalizado)
   Cabecalho (2121): menu, tipografia, estrutura de pagina.
   Rodape (2122): proporcao de imagem e botao flutuante.
   =============================================================== */

/* ---------------------------------------------------------------
   Rodape sempre no fim, sem faixa branca

   ⛔ NAO empilhar tecnicas. Houve duas ao mesmo tempo e elas brigavam:
   "footer{position:sticky;top:100vh}" (no cabecalho 2121) e
   "footer{margin-top:auto}" (aqui). Por isso a faixa branca mudava de
   lugar a cada conserto, ora abaixo do rodape, ora acima dele. Quem
   mexer aqui confere ANTES se o 2121 nao voltou a declarar sticky.

   ⚠️ O erro de fundo era outro: empurrar o RODAPE com margin-top:auto
   deixa a folga do lado de fora de qualquer secao, e folga sem dono
   aparece na cor do body, que e branca. Numa pagina curta cuja ultima
   secao e azul, isso e uma faixa branca entre o azul e o rodape.

   A forma certa e o inverso: quem cresce e o MIOLO, e dentro dele a
   ultima secao. Assim a folga fica dentro da secao e ganha a cor dela.
   Em pagina longa nao ha folga e as regras nao fazem nada.

   O justify-content:center existe pelo mesmo motivo: numa tela muito
   alta a ultima secao estica bastante, e sem ele o conteudo fica
   colado no topo de uma faixa colorida enorme. Quando nao ha sobra,
   centralizar nao muda nada, entao a regra so age quando precisa.

   ⚠️ Pintar o body de escuro resolveria o azul e quebraria a politica
   de privacidade, que o tema despeja solta no body, sem contentor
   nenhum: seria texto escuro sobre fundo escuro. Por isso o body fica
   branco, e o escuro do html so aparece se tudo mais falhar.
   --------------------------------------------------------------- */

html{background-color:#0E0E10;}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color:#fff;
}

/* o miolo ocupa a sobra; a ultima secao dele e quem a pinta */
body > main,
body > div.elementor{flex:1 0 auto;}
body > div.elementor{display:flex;flex-direction:column;}
body > div.elementor > *:last-child{flex:1 0 auto;justify-content:center;}

/* Paginas no modelo do tema (page-template-default) tem main.site-main
   no lugar do div.elementor, e precisam do mesmo tratamento.

   ⚠️ Precisa do ".site-main": o cabecalho (2121) declara
   main.site-main{display:flow-root} e ganharia de "body > main" por
   especificidade. Trocar flow-root por flex nao reabre o vao do
   cabecalho: contentor flex tambem nao deixa margem de filho escapar,
   que era o motivo do flow-root. */
body > main.site-main{display:flex;flex-direction:column;}
body > main.site-main > *:last-child{flex:1 0 auto;}

/* o popup tambem e filho direto do body, e nao e miolo */
body > div.elementor-2355{flex:0 0 auto;display:block;}

/* Pagina sem miolo nenhum: o tema despeja o texto solto no body, sem
   contentor. Nao havendo o que crescer, o rodape precisa ser empurrado
   a mao, senao sobra branco DEBAIXO dele em tela alta (376px medidos
   numa janela de 2600px). Aqui a folga cai ACIMA do rodape, sobre
   pagina branca, e some.

   ⚠️ As duas tecnicas nao convivem na mesma pagina: em flexbox, a
   margem auto consome o espaco livre ANTES do flex-grow, entao um
   rodape com margin-top:auto impede o miolo de crescer e traz a faixa
   branca de volta. Por isso isto e por pagina, e nao global.

   ⚠️ O ideal seria o seletor condicional
   body:not(:has(> div.elementor)) > footer{...}, que dispensaria a
   lista. Nao da: o gerador de CSS do Elementor DESCARTA, em silencio,
   toda regra que use :has(). O navegador suporta, o arquivo servido
   simplesmente nao tem a regra. Confira sempre no post-2117.css
   servido, nao no que foi gravado.

   ⚠️ Nenhuma classe do body distingue esse caso: a politica tem
   "elementor-page" igual as paginas com miolo. Por isso e por id.

   Lista de hoje: 1874 = politica de privacidade. O certo, quando
   houver folego, e refazer essa pagina como documento do Elementor;
   ai ela ganha miolo e sai daqui. */
body.elementor-page-1874 > footer.elementor-location-footer{margin-top:auto;}

/* ---------------------------------------------------------------
   Camadas do site

     popup do Elementor            2147482000  (modal, vence tudo)
     cabecalho fixo                2147481500  (o menu abre por cima)
     rodape e botao flutuante      2147481000
     capa e demais secoes                auto

   ⚠️ Subir o z-index do botao flutuante nao resolve sozinho: o
   rodape cria contexto de empilhamento, entao o valor do botao so
   ordena o que esta DENTRO dele. Quem precisa de camada e o rodape.

   ⚠️ E z-index so vale em elemento posicionado. O rodape era sticky
   por outro motivo e ganhava a camada de brinde; ao tirar o sticky
   (29/09/2026) foi preciso declarar position:relative aqui, senao o
   2147481000 vira numero decorativo e o botao flutuante volta para
   baixo do overlay da capa.

   ⚠️ O cabecalho precisa vencer o rodape, nao so a pagina: o rodape
   passou a ter camada altissima e comecou a cortar o menu suspenso de
   Servicos, que desce sobre ele. Navegacao vence conteudo.

   ⚠️ O prefixo "body" tambem nao e enfeite: o rodape (post-2122.css)
   declara z-index:9999 !important no mesmo seletor e carrega DEPOIS
   deste arquivo. Com peso igual o ultimo ganha; o "body" resolve por
   especificidade, que nao depende da ordem de carga.
   --------------------------------------------------------------- */

body footer.elementor-location-footer{position:relative;z-index:2147481000;}
body header.elementor-location-header{z-index:2147481500;}
body .elementor-element-2afed25c{z-index:2147483000 !important;}
body .elementor-element-2afed25c .elementor-element-5c23fb49{z-index:2147483000 !important;}
body .elementor-element-60cbef97{background-color:#fff !important;isolation:isolate;}
body .elementor-popup-modal{z-index:2147482000 !important;}

/* A capa contem o proprio overlay, em vez de deixa-lo subir ao body */
body .rn-hero{isolation:isolate;}

/* ---------------------------------------------------------------
   Pre-formulario no popup (2355)
   --------------------------------------------------------------- */

/* ⚠️ Os cantos brancos vinham do .dialog-widget-content, que o Elementor
   pinta de BRANCO e deixa quadrado. O .dialog-message por cima dele tem
   canto arredondado e recorta o conteudo azul, entao o branco de tras
   aparecia nas quatro pontas. Deixar o contentor transparente resolve:
   quem pinta o popup passa a ser a propria secao azul.

   ⚠️ 560px espremia as duas colunas em ~250px cada, com o titulo
   quebrando em tres linhas. Em duas colunas a conta e o dobro: 960px
   deixa ~410px por coluna, descontados recuo e intervalo. */

.elementor-popup-modal .dialog-widget-content{
  background-color:transparent !important;
  box-shadow:none !important;
  border-radius:18px;
  overflow:hidden;
}
/* ⚠️ A largura precisa de "body" na frente. O documento do popup gera
   "#elementor-popup-modal-2355 .dialog-message{width:640px}" no proprio
   CSS dele, que carrega DEPOIS deste e vence por ter id. O "body" sobe
   a especificidade sem recorrer a !important. */
body #elementor-popup-modal-2355 .dialog-message{
  max-width:960px;width:calc(100vw - 32px);
  border-radius:18px;overflow:hidden;padding:0;
}
.elementor-popup-modal .elementor-2355 > .e-con{border-radius:18px;}

/* Abaixo de 820px nao cabem duas colunas.
   ⚠️ O seletor parte do id do BLOCO deste documento (1ebf43ae) e desce
   pela estrutura: os ids internos do componente mudam a cada instancia,
   entao mirar neles quebra sozinho na proxima edicao. */
@media (max-width:820px){
  body #elementor-popup-modal-2355 .dialog-message{max-width:520px;}
  .elementor-element-1ebf43ae > .e-con{
    grid-template-columns:1fr !important;gap:22px !important;padding:20px !important;
  }
}

/* O escurecimento do fundo tem que cobrir a tela inteira.

   ⚠️ Com a pagina ROLADA, o Elementor abria o popup com top:-64px e
   altura de 100vh, entao ele ia de y=-64 ate y=656 numa janela de 720:
   sobrava uma faixa de 64px no rodape SEM escurecimento, com o site
   aparecendo normal por baixo. Reproduzido em 08/10/2026 rolando a
   pagina antes de abrir; com a pagina no topo o defeito nao aparece,
   e foi por isso que passou despercebido.

   O valor vem do JS do Elementor, que compensa o header fixo (99px) e
   erra quando o header esta recolhido. Nao esta em CSS nenhum, entao
   procurar a regra nao adianta -- o jeito e fixar os quatro lados.

   100dvh em vez de 100vh: no celular a barra do navegador entra e sai,
   e 100vh fica maior que a area visivel. */
body .elementor-popup-modal{
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100vw !important; height:100dvh !important;
  /* escurecimento mais forte que o padrao (era rgba(0,0,0,0.8)) e levemente
     azulado, para o popup descolar do fundo em vez de competir com ele */
  background-color:rgba(4,10,24,0.92) !important;
}

/* Trava a rolagem da pagina enquanto o popup esta aberto.

   Sem isso a pessoa rola o site por tras do formulario, o popup fica
   boiando sobre conteudo que se move e a sensacao e de erro.

   ⚠️ O Elementor NAO poe classe nenhuma no body ao abrir (conferido em
   08/10/2026), entao nao da para enganchar por classe. O que muda e o
   atributo style do proprio modal: fechado ele recebe `display: none`,
   aberto o atributo fica vazio. Dai o seletor por :has() + :not().

   ⚠️ `overflow:hidden` trava a rolagem do USUARIO, mas nao a feita por
   script (window.scrollBy continua funcionando). Entao testar isso com
   JS da falso negativo -- a validacao tem que ser com roda ou tecla. */
html:has(.elementor-popup-modal:not([style*="none"])),
body:has(.elementor-popup-modal:not([style*="none"])){
  overflow:hidden !important;
}

/* Foto da frota ao fundo do lado azul do popup.

   ⚠️ A imagem e do acervo do PROPRIO cliente (media 1284, caminhao com
   tanque azul da Renasce), nao banco de imagem. As opcoes de banco que
   existiam na biblioteca eram domesticas (pia, luvas amarelas) e de cor
   quente, que brigava com o azul da marca.

   Tres camadas, nesta ordem: ::before leva a foto, ::after leva o
   gradiente azul que garante contraste do texto, e o conteudo sobe para
   z-index 2. Sem o gradiente por cima, o titulo branco cai em cima de
   areas claras da foto e perde legibilidade.

   `mix-blend-mode: luminosity` descarta a cor da foto e mantem so a
   luz, entao ela nao briga com o azul da marca; o dessaturamento
   parcial ajuda no mesmo sentido. Opacidade 0.20: acima disso a foto
   compete com o formulario, abaixo ela some. */
body .elementor-popup-modal .elementor-element-1ebf43ae{
  position:relative;isolation:isolate;
}
body .elementor-popup-modal .elementor-element-1ebf43ae::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('https://desentupidorarenasce.com.br/wp-content/uploads/2015/06/desentupidora-renasce-1024x768.jpg');
  background-size:cover;background-position:center right;
  opacity:0.20;filter:grayscale(0.35) contrast(1.05);
  mix-blend-mode:luminosity;
}
body .elementor-popup-modal .elementor-element-1ebf43ae::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,
    rgba(0,46,133,0.92) 0%, rgba(0,32,79,0.80) 55%, rgba(0,32,79,0.45) 100%);
}
body .elementor-popup-modal .elementor-element-1ebf43ae > *{
  position:relative;z-index:2;
}

/* O botao de fechar.

   ⚠️ O X e um SVG com `fill` PROPRIO (#1F2124, quase preto). `color`
   nao o alcanca: so pintaria se o SVG usasse currentColor. Entao a
   regra antiga com `color:#fff` nao fazia nada, e o X ficava escuro.

   ⚠️ Pintar o X de branco TAMBEM nao basta: o botao fica no canto
   superior direito do modal, que e exatamente onde comeca o cartao
   BRANCO do formulario. X branco sobre branco some igual. Por isso o
   botao ganha fundo escuro proprio -- assim ele tem contraste em
   qualquer fundo, azul ou branco.

   O contorno de foco vira anel arredondado: o padrao desenhava um
   quadrado branco no canto, e tirar o indicador deixaria quem navega
   pelo teclado sem saber onde esta. */
.elementor-popup-modal .dialog-close-button{
  z-index:5;color:#fff;opacity:1;font-size:22px;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background-color:rgba(10,20,40,0.55);
  border-radius:999px;outline:none;
  transition:background-color 180ms;
}
/* ⚠️ O X e um SPRITE: <svg><use xlink:href="#eicon-close"></use></svg>.
   O desenho vem de um <symbol> em outro ponto do documento, cujo <path>
   NAO tem fill proprio -- ele herda. Quem pinta de escuro e uma regra do
   proprio Elementor sobre a classe do icone, que carrega depois da nossa.
   Por isso aqui vai `body` + `!important` e os TRES niveis (botao, svg e
   use): sem isso a regra e aplicada e perde, silenciosamente.
   Medido em 08/10/2026: sem !important o fill computado seguia
   rgb(31,33,36); com, vai para branco nos tres. */
body .elementor-popup-modal .dialog-close-button,
body .elementor-popup-modal .dialog-close-button svg,
body .elementor-popup-modal .dialog-close-button svg use{
  fill:#fff !important;color:#fff !important;
}
.elementor-popup-modal .dialog-close-button svg{
  width:16px;height:16px;
}
.elementor-popup-modal .dialog-close-button:hover{background-color:rgba(10,20,40,0.8);}
.elementor-popup-modal .dialog-close-button:focus{outline:none;box-shadow:none;}
.elementor-popup-modal .dialog-close-button:focus-visible{
  outline:2px solid rgba(255,255,255,0.9);outline-offset:3px;
}

/* ---------------------------------------------------------------
   Campo invalido fica evidente antes do envio
   --------------------------------------------------------------- */

input:user-invalid,textarea:user-invalid{
  border-color:#E00828 !important;
  box-shadow:0 0 0 3px rgba(224,8,40,0.12) !important;
}
input:user-valid,textarea:user-valid{border-color:#34D058 !important;}

/* ---------------------------------------------------------------
   Modelo padrao do tema (clientes, galeria e paginas de servico)

   PROIBIDO: vao entre o cabecalho e a capa.

   O WordPress deixa um <p> so com tabulacoes dentro de .page-content.
   Ele tem ALTURA ZERO, e ai esta a sutileza: elemento de altura zero
   funde a margem de cima com a de baixo numa margem so. Zerar apenas
   o margin-top nao resolve, porque quem sobrevive e a de baixo.
   --------------------------------------------------------------- */

main.site-main{display:flow-root;}
main.site-main .page-content > p:first-child{margin:0 !important;}
main.site-main > .page-content > *:first-child{margin-top:0 !important;}
main.site-main > .page-header{margin-top:0 !important;padding-top:52px;padding-bottom:4px;}
main.site-main > .page-header > .entry-title{margin-top:0 !important;font-size:34px;line-height:1.2;color:#002E85;}

/* ---------------------------------------------------------------
   Artigo do blog (modelo 2349): coluna de leitura de 72ch
   --------------------------------------------------------------- */

.elementor-2349 .elementor-element-6149bdc7{max-width:none;}
.elementor-2349 .elementor-element-17588b01,
.elementor-2349 .elementor-element-23f357b{max-width:72ch;margin-inline:auto;width:100%;}
.elementor-2349 .elementor-element-17588b01{font-size:18px;line-height:1.8;color:#2B2F36;}
.elementor-2349 .elementor-element-17588b01 p{margin:0 0 22px;font-size:18px;line-height:1.8;}
.elementor-2349 .elementor-element-17588b01 h2{font-size:28px;line-height:1.24;color:#002E85;margin:44px 0 14px;font-weight:700;}
.elementor-2349 .elementor-element-17588b01 h3{font-size:21px;line-height:1.3;color:#002E85;margin:32px 0 10px;font-weight:700;}
.elementor-2349 .elementor-element-17588b01 ul,
.elementor-2349 .elementor-element-17588b01 ol{margin:0 0 22px;padding-inline-start:26px;}
.elementor-2349 .elementor-element-17588b01 li{margin-bottom:9px;font-size:18px;line-height:1.75;}
.elementor-2349 .elementor-element-17588b01 a{color:#0040B8;text-decoration:underline;text-underline-offset:3px;}
.elementor-2349 .elementor-element-17588b01 strong,
.elementor-2349 .elementor-element-17588b01 b{color:#181818;font-weight:700;}
.elementor-2349 .elementor-element-17588b01 img{max-width:100%;height:auto;border-radius:10px;margin:8px 0 26px;}
.elementor-2349 .elementor-element-17588b01 blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:3px solid #0040B8;color:#181818;font-size:19px;line-height:1.7;}
.elementor-2349 .elementor-element-17588b01 span,
.elementor-2349 .elementor-element-17588b01 font{
  font-family:inherit !important;font-size:inherit !important;
  line-height:inherit !important;color:inherit !important;
  background-color:transparent !important;
}
.elementor-2349 .elementor-element-23f357b{margin-top:38px;padding-top:22px;border-top:1px solid #E1E5EC;}
.elementor-2349 .elementor-element-23f357b a{color:#0040B8;text-decoration:none;font-weight:600;}
.elementor-2349 .elementor-element-23f357b a::before{content:'\2190  ';}
@media (max-width:767px){
  .elementor-2349 .elementor-element-17588b01,
  .elementor-2349 .elementor-element-17588b01 p,
  .elementor-2349 .elementor-element-17588b01 li{font-size:16.5px;}
  .elementor-2349 .elementor-element-17588b01 h2{font-size:24px;}
}

/* ---------------------------------------------------------------
   Mural de logos de clientes: caixa igual, marca com contain
   --------------------------------------------------------------- */

.elementor-element-2f681f60{
  display:grid !important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;align-items:stretch;margin-top:26px;
}
.elementor-element-2f681f60 img{
  width:100%;height:74px;object-fit:contain !important;object-position:center;
  padding:12px 14px;background-color:#fff;border:1px solid #E8ECF2;border-radius:8px;
  filter:grayscale(1);opacity:0.62;
  transition:filter 240ms,opacity 240ms,border-color 240ms,transform 240ms cubic-bezier(0.16,1,0.3,1);
}
.elementor-element-2f681f60 img:hover{filter:grayscale(0);opacity:1;border-color:#C9D6EE;transform:translateY(-2px);}
@media (max-width:767px){
  .elementor-element-2f681f60{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;}
  .elementor-element-2f681f60 img{height:62px;padding:10px;}
}

/* ---------------------------------------------------------------
   Blog: cards da listagem (modelo 2338). Os ids internos mudam a
   cada item do loop: o CSS parte do id do ITEM, que e estavel.
   --------------------------------------------------------------- */

.elementor-element-bf04ca9{padding:0 !important;}
.elementor-element-bf04ca9 > .e-con{
  height:100%;padding:0 !important;background-color:#fff;
  border:1px solid #E1E5EC;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform 220ms cubic-bezier(0.16,1,0.3,1),box-shadow 220ms,border-color 220ms;
}
.elementor-element-bf04ca9 > .e-con:hover{transform:translateY(-3px);border-color:#C9D6EE;box-shadow:0 16px 38px rgba(0,18,56,0.13);}
.elementor-element-bf04ca9 a.e-image-link-base{display:block;line-height:0;overflow:hidden;background-color:#F2F4F7;}
.elementor-element-bf04ca9 a.e-image-link-base img{width:100%;height:198px;object-fit:cover;display:block;transition:transform 400ms cubic-bezier(0.16,1,0.3,1);}
.elementor-element-bf04ca9 > .e-con:hover a.e-image-link-base img{transform:scale(1.04);}
.elementor-element-bf04ca9 > .e-con > .e-con{padding:16px 18px 20px !important;display:flex;flex-direction:column;gap:8px;flex:1;}
.elementor-element-bf04ca9 > .e-con > .e-con > p:first-child{margin:0;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#0040B8;}
.elementor-element-bf04ca9 h3{margin:0;font-size:17.5px;line-height:1.34;font-weight:700;}
.elementor-element-bf04ca9 h3 a{color:#002E85;text-decoration:none;}
.elementor-element-bf04ca9 > .e-con:hover h3 a{color:#0040B8;}
.elementor-element-bf04ca9 > .e-con > .e-con > p:last-child{margin:0;font-size:14.5px;line-height:1.6;color:#4A4F57;}
.elementor-2338 [class*="e-pagination"]{margin-top:12px;}

/* ---------------------------------------------------------------
   Listagem do tema, caso alguma rota ainda caia nela
   --------------------------------------------------------------- */

body.blog main.site-main > .page-content,
body.archive main.site-main > .page-content,
body.search main.site-main > .page-content{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:26px;align-items:stretch;padding-block:10px 52px;
}
body.blog article.post,body.archive article.post,body.search article.post{
  display:flex;flex-direction:column;background-color:#fff;
  border:1px solid #E1E5EC;border-radius:14px;overflow:hidden;
}
body.blog article.post > a,body.archive article.post > a,body.search article.post > a{order:-1;display:block;line-height:0;}
body.blog article.post > a img,body.archive article.post > a img,body.search article.post > a img{width:100%;height:198px;object-fit:cover;display:block;}
body.blog article.post > h2.entry-title,body.archive article.post > h2.entry-title,body.search article.post > h2.entry-title{order:1;margin:16px 18px 0;font-size:17.5px;line-height:1.34;}
body.blog article.post > h2.entry-title a,body.archive article.post > h2.entry-title a,body.search article.post > h2.entry-title a{color:#002E85;text-decoration:none;}
body.blog article.post > p,body.archive article.post > p,body.search article.post > p{order:2;margin:10px 18px 20px;font-size:14.5px;line-height:1.6;color:#4A4F57;}
body.blog .page-numbers,body.archive .page-numbers,body.search .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
  border:1px solid #E1E5EC;border-radius:8px;color:#181818;text-decoration:none;font-size:14.5px;font-weight:600;
}
body.blog .page-numbers.current,body.archive .page-numbers.current,body.search .page-numbers.current{background-color:#0040B8;border-color:#0040B8;color:#fff;}

/* ---------------------------------------------------------------
   Campo oculto de roteamento da planilha de leads

   O campo "_sheet" diz ao Apps Script em qual aba gravar. Ele e so
   transporte: nao se digita nada nele.

   ⚠️ Esconder pelo ESTILO do elemento no Elementor nao serve. Campo
   duplicado herda a MESMA classe de estilo do original, entao o
   display:none aplicado no duplicado apagou tambem o campo "Nome" das
   duas paginas. Aqui o seletor e o id, que e unico por campo.
   --------------------------------------------------------------- */

#_sheet{display:none !important;}
/* o rotulo so existe para campo que a pessoa preenche */
label[for="_sheet"]{display:none !important;}

/* ---------------------------------------------------------------
   Botao de enviar enquanto o envio acontece

   O texto troca para "Enviando..." pelo snippet 2357; aqui vem o
   sinal visual: a roda girando e o cursor de espera. Sem isso o
   clique parece nao ter feito nada e a pessoa envia duas vezes.

   A animacao respeita quem pediu menos movimento no sistema
   (prefers-reduced-motion): nesse caso o texto sozinho ja informa.
   --------------------------------------------------------------- */

.e-form-submit-button-base[aria-busy="true"],
.elementor-button[aria-busy="true"]{
  cursor:wait;opacity:0.92;pointer-events:none;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.e-form-submit-button-base[aria-busy="true"]::before,
.elementor-button[aria-busy="true"]::before{
  content:"";width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(255,255,255,0.45);border-top-color:#fff;
  animation:rn-girando 0.65s linear infinite;
}
@keyframes rn-girando{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .e-form-submit-button-base[aria-busy="true"]::before,
  .elementor-button[aria-busy="true"]::before{animation:none;opacity:0.5;}
}

/* ---------------------------------------------------------------
   Aviso no botao flutuante de contato

   Um selo vermelho no canto do botao, que aparece alguns segundos
   depois da pessoa chegar e some assim que ela abre o painel. Serve
   para o canal de atendimento nao passar despercebido.

   ⚠️ Quem decide QUANDO aparecer e o snippet 2357, pela classe
   "rn-chamar-contato" no body. Sem ela o selo fica invisivel, entao
   desligar o aviso e tirar uma linha de JS, sem mexer aqui.

   ⚠️ O selo some com o painel aberto (details[open]): manter o aviso
   depois de a pessoa ja ter aberto seria ruido puro.

   ⚠️ O selo mora no ::BEFORE, nunca no ::after. O ::after do mesmo
   summary ja tem dono: e nele que o post-2122.css (rodape) desenha o
   icone do balao de conversa, com "content:'' !important". Mirar o
   ::after tira as DUAS coisas de uma vez, e de um jeito que nao
   parece erro de CSS: o nosso seletor e mais especifico, entao o
   balao de 27px no centro vira um ponto vermelho de 21px no canto,
   enquanto o "1" perde para o !important e nunca aparece. Foi o que
   aconteceu em 02/10/2026. Um pseudo-elemento, um dono.
   --------------------------------------------------------------- */

.elementor-element-2afed25c summary{position:relative;overflow:visible;}

/* ⚠️ Largura FIXA, nao "min-width + padding". O summary e um flex
   container, e ali o selo saiu com os 60px do botao inteiro, virando
   uma faixa vermelha atravessada no topo em vez de um circulo. Como o
   numero e sempre "1", 21px fixos resolvem e ficam previsiveis. */
.elementor-element-2afed25c summary::before{
  content:"1";
  position:absolute;top:-4px;right:-4px;left:auto;z-index:3;
  width:21px;min-width:21px;height:21px;padding:0;box-sizing:border-box;
  border-radius:999px;background-color:#E00828;color:#fff;
  font-family:"Inter",system-ui,sans-serif;
  font-size:12px;font-weight:700;line-height:21px;text-align:center;
  box-shadow:0 0 0 2px #fff,0 2px 8px rgba(0,0,0,0.28);
  opacity:0;transform:scale(0.3);pointer-events:none;
  transition:opacity 260ms ease,transform 260ms cubic-bezier(0.18,1.3,0.4,1);
}

body.rn-chamar-contato .elementor-element-2afed25c details:not([open]) summary::before{
  opacity:1;transform:scale(1);
  animation:rn-selo-pulso 2.6s ease-in-out 0.4s infinite;
}

@keyframes rn-selo-pulso{
  0%,70%,100%{transform:scale(1);}
  78%{transform:scale(1.18);}
  86%{transform:scale(0.96);}
}

@media (prefers-reduced-motion:reduce){
  body.rn-chamar-contato .elementor-element-2afed25c details:not([open]) summary::before{
    animation:none;
  }
}/* End custom CSS */