/* Ponte para o DOM do Elementor — carrega DEPOIS do estilo.css. */


/* ---- ajustes de DOM: Elementor embrulha widgets em divs extras ---- */
.elementor-widget-container{margin:0}
/* O Elementor estica todo widget a 100% da largura do container. Nos botoes
   isso quebra o layout: .btn, .chip e .link sao inline-flex no original, entao
   os chips da cartela e os dois botoes do hero ficariam um por linha, em largura
   cheia. O tamanho volta a ser o do conteudo, como no layout. */
.elementor-widget-button{width:auto;max-width:100%}
/* paragrafos e titulos ja tem margem propria no sistema original */
.olho .elementor-widget-container,.lead .elementor-widget-container,
.spec .elementor-widget-container,.nota .elementor-widget-container{display:contents}
.tit .elementor-widget-container{display:contents}
/* o text-editor do Elementor entra com margem de paragrafo; o original nao tem */
.servico ul{margin:0;padding:0}
/* a grade de pecas mora num text-editor: o wrapper nao pode ter margem */
.grade-pecas p{margin:0}
/* botoes: a classe .btn mora no wrapper; o <a> interno e zerado e remontado
   na secao PONTE, em .btn > .elementor-button. Havia aqui uma segunda regra
   (all:unset em .elementor-widget-button.btn .elementor-button), mais especifica,
   que anulava aquela remontagem: o <a> ficava inline e sem gap, e o icone do
   WhatsApp colava no texto. Removida; a da PONTE basta. */
/* O icone do botao no original e um <svg fill="currentColor"> inline. O
   Elementor troca por um SVG proprio, sem fill, e a regra que o pintaria
   (.e-font-icon-svg{fill:currentColor}) nao chega nesta pagina: o icone do
   WhatsApp saia PRETO sobre o botao vermelho. Devolve a cor do texto e o
   tamanho de 15px do original, vencendo o height:1em/auto do Elementor. */
.btn .elementor-button-icon svg{width:15px;height:15px;fill:currentColor}

/* ---- carrossel ----
   As setas (<button>) e o trilho (<ul> com os <li>) sao o markup original,
   dentro de text-editors; display:contents devolve os tres como filhos diretos
   do .carrossel, para o flex do estilo.css alinhar como no layout. Assim nao ha
   ponte para ladrilho nem para seta: valem .ladrilho, .ladrilho svg e .seta svg
   do proprio original. */
.carrossel > .elementor-widget-text-editor{display:contents}

/* ==========================================================================
   PONTE PARA O DOM DO ELEMENTOR
   Conferido no HTML renderizado do post 8902. O Elementor poe a classe do
   design no <div> wrapper e estiliza o elemento INTERNO com regras proprias,
   que vencem. Estas regras devolvem o comando ao estilo.css.
   ========================================================================== */

/* --- botoes, chips, links de cartao e setas ---
   O <a class="elementor-button"> interno e zerado e vira apenas o conteudo do
   wrapper ja estilizado. O ::after estica o link sobre a area toda, para que o
   padding do wrapper continue clicavel como no original. */
.btn,.chip,.servico .link,.seta{position:relative}
.btn > .elementor-button,
.chip > .elementor-button,
.servico .link > .elementor-button,
.seta > .elementor-button{
  all:unset;display:inline-flex;align-items:center;gap:inherit;
  cursor:pointer;font:inherit;color:inherit;
  letter-spacing:inherit;text-transform:inherit}
.btn > .elementor-button::after,
.chip > .elementor-button::after,
.servico .link > .elementor-button::after,
.seta > .elementor-button::after{content:"";position:absolute;inset:0}
.btn .elementor-button-content-wrapper,
.chip .elementor-button-content-wrapper,
.servico .link .elementor-button-content-wrapper{
  display:inline-flex;align-items:center;gap:inherit}

/* --- titulos ---
   .tit fica no wrapper; o <h1>/<h2>/<h3> interno herdaria a fonte, mas o
   font-size do user-agent vence a heranca. font:inherit devolve a escala. */
.tit > .elementor-heading-title{font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;margin:0}

/* ==========================================================================
   CORES PADRAO DO KIT DO ELEMENTOR
   O kit deste site nao tem cores definidas, entao valem os defaults do
   Elementor: titulo em --e-global-color-primary (#6EC1E4, AZUL) e texto em
   --e-global-color-text (#7A7A7A). Eles venciam nos pontos em que o estilo.css
   mira o elemento interno (.passo h3, .faixa p) e nao o wrapper que leva a
   classe. color:inherit devolve a cascata ao layout.
   ========================================================================== */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor{color:inherit}

/* Onde o original estiliza o <p> e o text-editor nao gera <p>, a regra e
   reemitida no wrapper — corpo extraido do estilo.css, sem redigitar valores. */
.faixa .elementor-widget-text-editor{margin:14px 0 0;color:var(--rosa-claro);max-width:48ch}
.faixa-foto .elementor-widget-text-editor{margin:0;line-height:0}
.passo .elementor-widget-text-editor{margin:0;color:var(--claro-2);font-size:var(--fs-5)}
.frentes-cab .elementor-widget-text-editor{margin:12px 0 0;color:var(--grafite)}

/* --- fotos do hero ---
   Os <img> do carrossel sao position:absolute com inset:0 e contam com o
   .hero-fundo como caixa de referencia. No Elementor eles chegam dentro de um
   widget que e position:relative (todo .elementor-element e), com altura zero:
   as fotos preenchiam esse zero e sumiam. display:contents tira o widget e o
   seu container da arvore de caixas, e a referencia volta a ser o .hero-fundo.
   Conferido no site: sem isto o hero fica so com o gradiente.
   ATENCAO: este bloco ja foi apagado uma vez por engano, num corte de trecho
   vizinho — e o hero ficou sem foto no ar. Nao mover para perto de blocos
   que possam ser removidos. */
.hero-fundo > .elementor-widget-text-editor,
.hero-fundo > .elementor-widget-text-editor > .elementor-widget-container{display:contents}

/* --- selo do hero ---
   No layout .hero .olho e inline-flex, entao a pastilha encolhe ate o texto.
   O Elementor estica todo widget a 100% da largura do container, e a pastilha
   esticava com ele; fit-content devolve o comportamento do original. */
.hero .olho{width:fit-content;max-width:100%}

/* A margem do selo precisa ser reafirmada aqui. Medido no navegador: a regra
   .hero .olho do estilo.css entrega padding e border-radius normalmente, mas
   margin e display chegam sobrescritos pelo Elementor (o computado dava
   margin:0 com a fonte pedindo 30px). Com seletor mais especifico, e a ponte
   carregando depois do estilo.css, o valor da fonte volta a valer.
   Se mudar o espacamento, mudar NOS DOIS lugares. */
.hero .hero-texto > .olho{margin:0 0 30px}

/* --- barra de tinta ---
   O markup original vive num text-editor; display:contents devolve a propria
   .barra-tinta como filha do .hero / .sobre-texto, para as regras de posicao,
   altura e sombra do estilo.css valerem sobre ela. */
.barra-wrap{display:contents}

/* --- formulario ---
   O <form> original vive dentro de um text-editor; display:contents devolve o
   proprio <form> como item da grade .grade-contato, e a partir dai valem as
   regras .form / .campo / .dupla do estilo.css, sem ponte nenhuma. */
.grade-contato > .elementor-widget-text-editor{display:contents}