/* ==========================================================================
   MGX — guarda de especificidade das seções próprias

   O clone herda o CSS do construtor de página (Elementor), que declara regras
   com seletor de CLASSE + TIPO, por exemplo `.elementor-kit-7 h2 { color }`.
   Especificidade (0,1,1). Uma classe sozinha — `.mgxsim__titulo` — vale
   (0,1,0) e PERDE, mesmo sendo escrita depois.

   Medido na tela em 23/09/2026: o título do simulador saiu dourado
   `rgb(255,196,115)` — a cor da marca de ORIGEM — porque a regra global do
   construtor ganhava da folha do componente. Não era erro do componente.

   Esta folha repõe, com seletor de classe DUPLICADO (0,2,0), o que cada
   seção própria declara. Não inventa aparência: só devolve a decisão para
   quem desenhou a seção. Carrega DEPOIS de todas as folhas próprias.
   ========================================================================== */

/* cada seção própria é uma ilha: define a cor herdada dentro dela */
.mgxsim.mgxsim,
.mgxprova.mgxprova,
.mgxcmp.mgxcmp,
.mgxfaq.mgxfaq,
.mgx-placas.mgx-placas {
  color: #D4D4D8;
}

/* títulos: brancos por padrão, com o azul só onde o componente pediu <b> */
.mgxsim.mgxsim :is(h1, h2, h3, h4),
.mgxprova.mgxprova :is(h1, h2, h3, h4),
.mgxcmp.mgxcmp :is(h1, h2, h3, h4),
.mgxfaq.mgxfaq :is(h1, h2, h3, h4) {
  color: #fff;
}

/* o azul da marca aponta, não decora: só no destaque declarado */
.mgxsim.mgxsim :is(h1, h2, h3, h4) b,
.mgxprova.mgxprova :is(h1, h2, h3, h4) b,
.mgxcmp.mgxcmp :is(h1, h2, h3, h4) b,
.mgxfaq.mgxfaq :is(h1, h2, h3, h4) b {
  color: inherit;
}

/* O título da prova social é cinza de propósito (o que ainda NÃO é), com o
   branco só na segunda metade da frase. A guarda não pode atropelar isso. */
.mgxprova.mgxprova .mgxprova__titulo { color: #8A8A94; }
.mgxprova.mgxprova .mgxprova__titulo b { color: #fff; }

/* O construtor também força `color` em links. Dentro das seções próprias,
   quem decide é o componente. */
.mgxsim.mgxsim a,
.mgxprova.mgxprova a,
.mgxcmp.mgxcmp a,
.mgxfaq.mgxfaq a { color: #00A7FF; }

/* ==========================================================================
   CONTENÇÃO — as seções próprias entraram em buracos do construtor

   Cada seção nova ocupou o lugar de um widget do construtor de página, e
   herdou o contexto daquele lugar. Medido em 23/09/2026, a 1440px:

   · `.mgxprova` nasceu com 407px de largura porque o avô é uma GRADE DE TRÊS
     COLUNAS (as seis caixas de depoimento que ela substituiu). A seção virou
     uma célula: o texto quebrava com duas palavras por linha e 60% da tela
     ficava vazia à direita.

   · `.mgxfaq` ficou sobre um contêiner de fundo BRANCO. O acordeão antigo
     era largo o bastante para tapar; o novo tem respiro lateral, então o
     branco apareceu nas bordas de uma página preta.

   `:has()` resolve os dois sem tocar no HTML herdado: a regra sobe do filho
   para o pai, que é exatamente o que falta aqui.
   ========================================================================== */

/* 1. quem contém uma seção própria devolve a largura inteira a ela */
:is(.e-con, .e-con-inner, .elementor-element):has(> .mgxprova),
:is(.e-con, .e-con-inner, .elementor-element):has(> .mgxsim),
:is(.e-con, .e-con-inner, .elementor-element):has(> .mgxcmp),
:is(.e-con, .e-con-inner, .elementor-element):has(> .mgxfaq) {
  grid-column: 1 / -1;
  grid-row: auto;
  flex: 1 1 100%;
  inline-size: 100%;
  max-inline-size: none;
  align-self: stretch;
}

/* 2. e o fundo preto acompanha: seção própria nunca fica sobre claro */
:is(.e-con, .e-con-inner, .elementor-element, .elementor-widget-container):has(.mgxprova),
:is(.e-con, .e-con-inner, .elementor-element, .elementor-widget-container):has(.mgxsim),
:is(.e-con, .e-con-inner, .elementor-element, .elementor-widget-container):has(.mgxcmp),
:is(.e-con, .e-con-inner, .elementor-element, .elementor-widget-container):has(.mgxfaq) {
  background-color: #000;
  background-image: none;
}

/* 3. a própria seção ocupa a linha toda dentro de grade ou flex */
.mgxprova, .mgxsim, .mgxcmp, .mgxfaq {
  grid-column: 1 / -1;
  flex: 1 1 100%;
  inline-size: 100%;
  max-inline-size: none;
  align-self: stretch;
}

/* --------------------------------------------------------------------------
   A legenda da tabela é texto de leitura, não coluna

   `<caption>` numa tabela com `table-layout: fixed` herda a largura da
   primeira coluna: medido, a explicação "Como comparar esta tabela" saiu
   numa faixa de ~300px, com uma a três palavras por linha, ao lado de uma
   tabela de 1.400px. Legenda é prosa: ocupa a largura da tabela e fica
   acima dela.
   -------------------------------------------------------------------------- */
.mgxcmp caption {
  display: table-caption;
  caption-side: top;
  inline-size: auto;
  max-inline-size: 70ch;
  text-align: start;
  margin-block-end: clamp(0.75rem, 2vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   Painéis próprios no lugar das capturas da origem

   Os SVG entraram em widgets do construtor que estavam dimensionados para as
   capturas antigas. Medido em 23/09/2026: um painel renderizou com 641px de
   altura e outro com 318×250, com `object-fit: fill` — o mesmo desenho em
   duas escalas e com a proporção esticada. O texto dentro do SVG acompanha a
   escala, então o painel grande ficava com letra do tamanho de um título.

   Os painéis foram desenhados para render entre 280 e 640px de largura. Aqui
   está o teto, a proporção e o encaixe sem distorção.
   -------------------------------------------------------------------------- */
.mgx-ilustra__arte {
  /* !important aqui é consciente: o construtor dimensiona a imagem por
     seletor de três classes (`.elementor-3386 .elementor-element.elementor-
     element-XXXX img`), que vence qualquer classe própria. Medido: sem ele o
     painel continuava a 815px, fora da faixa de 280–640 para que foi
     desenhado, com a letra do tamanho de um título. */
  inline-size: 100% !important;
  max-inline-size: 30rem !important;
  block-size: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: contain;         /* nunca estica: `fill` deformava o desenho */
  display: block;
  margin-inline: auto;
  border-radius: 0.875rem;
}

/* o painel solto dentro do cartão de persona guarda a caixa do que saiu */
.mgx-ilustra__arte.mgx-ilustra--solta {
  max-inline-size: 270px !important;
  aspect-ratio: 270 / 94;
}

/* --------------------------------------------------------------------------
   Contêiner de efeito de movimento com largura zero

   O construtor de página marca alguns blocos com `elementor-motion-effects-*`
   e deixa o dimensionamento para o JavaScript dele — que a captura não traz,
   de propósito. Sem esse JS, o contêiner nasce com largura 0 e o que está
   dentro simplesmente não aparece: medido em 23/09/2026, dois dos sete
   painéis próprios renderizavam 0×0 por causa disto, e não por erro do SVG.

   É o mesmo defeito do sistema de revelação, que já tinha deixado 45 de 50
   elementos invisíveis: marcação que espera um script que não existe mais.
   -------------------------------------------------------------------------- */
.elementor-widget-container[class*='elementor-motion-effects'],
.elementor-motion-effects-container,
.elementor-motion-effects-layer {
  inline-size: 100%;
  min-inline-size: 0;
}