/* ════════════════════════════════════════════════
   NTA DIGITAL — PONTE TEMA ↔ ELEMENTOR
   Carregado só em páginas construídas com Elementor.
   ════════════════════════════════════════════════ */

/* Faz as classes do tema aplicadas a um widget valerem para a tag interna.
   Especificidade (0,3,0): vence a CSS global do Elementor (0,2,0) e perde
   para a CSS por elemento do editor (0,4,0) — tipografia definida pelo
   cliente no Elementor continua prevalecendo. */
.elementor-widget.elementor-widget-heading .elementor-heading-title {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    margin: 0;
}

/* Camadas decorativas (fundos, brilhos, texturas) montadas como widget HTML.
   O wrapper do widget passa a SER a camada, para que o inset:0 dos filhos
   resolva contra a seção e não contra um wrapper de altura zero.
   Vence o .elementor-widget { position: relative } do frontend.min.css. */
.elementor-widget.is-camada {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Imagens dentro de camadas decorativas devem preencher a camada.
   O Elementor força `.elementor img { height: auto }` (0,1,1); esta regra
   (0,2,1) devolve o height:100% que o tema espera. */
.elementor .is-camada img {
    height: 100%;
}

/* O container do Elementor força `display: flex` (.e-con, 0,1,0) e derruba o
   `display: grid` das classes de layout do tema. Marcar o container com
   `is-grid` (0,2,0) devolve o grid — o grid-template continua vindo do tema. */
.e-con.is-grid,
.elementor-widget.is-grid {
    display: grid;
}

/* Recupera o `margin: 0 auto` de blocos centralizados do tema, que não tem
   efeito quando o elemento vira item flex dentro do container do Elementor. */
.e-con.is-centralizado {
    margin-left: auto;
    margin-right: auto;
}

/* O tema define line-height e letter-spacing de título no reset (h1..h6).
   Como a classe do tema fica no wrapper do widget, o wrapper precisa carregar
   esses defaults para o `font: inherit` da tag interna alcançá-los.
   Especificidade (0,1,0) e carregado ANTES do CSS da página: qualquer classe
   do tema que declare o seu próprio valor continua vencendo. */
.elementor-widget-heading {
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* O Elementor zera borda, raio e sombra de toda <img> via `.elementor img`
   (0,1,1), que vence as classes do tema (0,1,0). Devolve o que o tema define. */
.elementor .s-history__img {
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* `.e-con-full` define text-align por variável e vence as classes do tema. */
.e-con.is-texto-centralizado {
    text-align: center;
}

/* Um elemento que no tema é filho direto de um container flex/grid vira, no
   Elementor, filho do wrapper do widget — e deixa de ser item do layout pai.
   `display: contents` remove a caixa do wrapper, devolvendo o filho à posição
   de item direto. Resolve display, tamanho e posição de uma vez. */
.elementor-widget.is-item-flex {
    display: contents;
}

/* O Elementor força `max-width: 100%` em todo widget filho de container
   (`.e-con.e-con > .e-con-inner > .elementor-widget`, 0,3,0) e empata em
   especificidade com a CSS por elemento do editor — vencendo por ordem de
   carregamento. Onde o tema define um max-width próprio, devolvemos o valor
   com 4 classes (0,4,0), acima do empate. */
.elementor .e-con .elementor-widget.h-section-title {
    max-width: 760px;
}

.elementor .e-con .elementor-widget.h-cta__title {
    max-width: 820px;
}

/* O `.container` do tema é responsivo (`width:100%; max-width:1200px;
   margin:0 auto; padding:0 var(--container-padding)`), e o padding acompanha
   um token que muda no mobile. O container do Elementor zera o padding pela
   variável lógica e atropela tudo isso.
   Esta regra devolve o comportamento do tema seguindo o token — em vez de
   fixar 1200px/24px no editor, que quebraria abaixo de 1200px de viewport. */
.e-con.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* O container do Elementor controla altura por variável própria e ignora o
   `height` das classes do tema; o editor só oferece `min-height`, que não
   reproduz `height:100vh` + `min-height:700px` ao mesmo tempo.
   O `flex:1` do container interno também se perde. */
.elementor .e-con.h-hero {
    height: 100vh;
    min-height: 700px;
}

.elementor .e-con.h-hero__container {
    flex: 1;
}

/* Bloco que no tema encolhe até o conteúdo (item flex com `max-width`) vira,
   no Elementor, um container de largura 100% e passa a ocupar todo o máximo. */
.elementor .e-con.h-hero__content {
    width: auto;
}

/* O tema empilha o hero com z-index (bg 0, overlay 1, conteúdo 2). O container
   do Elementor zera o z-index do conteúdo, e a overlay passa a cobrir o texto. */
.elementor .e-con.h-hero__container {
    z-index: 2;
}

/* ── Empilhamento e centralização perdidos no container do Elementor ──
   Levantado varrendo o CSS do tema atrás de `z-index` e `margin: 0 auto`,
   em vez de corrigir caso a caso conforme aparecem.

   z-index: o tema empilha seção decorativa (bg/overlay/fx) abaixo do conteúdo;
   o container do Elementor zera o z-index e a overlay cobre o texto. */
.elementor .e-con.h-hero__container,
.elementor .e-con.s-hero__container,
.elementor .e-con.c-hero__container,
.elementor .e-con.s-services-hero__grid,
.elementor .e-con.s-services-hero__content,
.elementor .e-con.h-cta__inner,
.elementor .e-con.h-features__card,
.elementor .e-con.h-features__mockup {
    position: relative;
    z-index: 3;
}

/* margin: 0 auto não centraliza item flex — o container do Elementor
   transforma esses blocos em item de flex e a centralização some. */
.elementor .e-con.h-cta__inner,
.elementor .e-con.h-cta__note,
.elementor .e-con.h-features__layout,
.elementor .e-con.h-seo-intro__text,
.elementor .e-con.s-cta__content,
.elementor .e-con.c-cta__content {
    margin-inline: auto;
}

/* `.c-contact-card__content` usa `flex: 1; min-width: 0` para ocupar o espaço
   restante do card e permitir o corte com reticências no dado de contato.
   Como container do Elementor, ele perde os dois. */
.elementor .e-con.c-contact-card__content {
    flex: 1;
    min-width: 0;
}

/* Widget que carrega classe do tema com centralização flex: o Elementor define
   align-items/justify-content no wrapper e desfaz o centro do ícone. */
.elementor .elementor-widget.c-contact-card__icon,
.elementor .elementor-widget.c-contact-card__arrow {
    align-items: center;
    justify-content: center;
}

/* Blocos que no tema são `inline-flex` (encolhem até o conteúdo) viram
   container do Elementor com largura total e passam a ocupar o espaço todo,
   quebrando o `space-between` do cabeçalho de seção. */
.elementor .e-con.h-section-link,
.elementor .e-con.h-service-card__link,
.elementor .e-con.c-contact-card__link {
    width: auto;
    flex-shrink: 0;
}

.elementor .e-con.h-section-link {
    padding-bottom: 2px;
}

.elementor .elementor-widget.h-service-card__icon {
    align-items: center;
    justify-content: center;
}

/* O widget de texto aplica a tipografia do Kit e ignora o que a classe do tema
   define no elemento pai — o rótulo de um link saía em peso 400 dentro de um
   <a> que o tema define como 600. `is-herda` devolve a herança. */
.elementor .elementor-widget.is-herda,
.elementor .elementor-widget.is-herda p,
.elementor .elementor-widget.is-herda span {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    margin: 0;
}

/* O container do Elementor é sempre `flex`; quando o tema usa `inline-flex`,
   o elemento deixa de ficar numa linha de texto e a altura da caixa pai muda. */
.elementor .elementor-element.e-con.h-service-card__link,
.elementor .elementor-element.e-con.h-section-link {
    /* o Elementor resolve o display por variavel (`display: var(--display)`),
       entao trocar a propriedade nao adianta — e a variavel que manda. */
    /* a variavel sozinha nao basta: outra regra do Elementor fixa `display:flex`
       na mesma especificidade e vence por ordem. */
    --display: inline-flex;
    display: inline-flex !important;
}

/* Coluna que o tema fixa com `position: sticky` — o container do Elementor
   define `position: relative` e a fixação se perde. */
.elementor .elementor-element.e-con.is-sticky {
    position: sticky;
    top: var(--nav-height, 64px);
}

/* O container do Elementor só aceita flex-start/center/flex-end/stretch —
   `baseline`, que o tema usa para alinhar o número ao título, é recusado
   na validação. Devolvido aqui. */
.elementor .elementor-element.e-con.h-process-step__header {
    align-items: baseline;
}

/* Widget que no tema encolhe até o conteúdo dentro de uma linha flex — o
   Elementor dá largura total e ele empurra os vizinhos. */
.elementor .elementor-widget.is-encolhe {
    width: auto;
    flex-shrink: 0;
}

/* O Elementor põe `min-width: 0` nos containers, então um item de grade nunca
   força a coluna a crescer até o conteúdo. No tema, a coluna com o número mais
   largo expande — sem isso as 4 colunas ficam iguais e não batem com o original. */
.elementor .elementor-element.e-con.h-stat {
    min-width: auto;
}