/* ==========================================================================
   MGX DIGITAL — Seção 1: tabela comparativa honesta
   Par de fragmentos/comparativo.html. CSS puro, zero dependência.

   CARREGAR DEPOIS dos CSS do construtor de página. O tema já pinta `table`,
   `th` e `td` por conta própria (borda cinza de 1px, padding de 15px, zebra
   nas linhas ímpares, fundo no hover e `font-size: 0.875rem`). Por isso toda
   regra daqui nasce com duas classes de escopo e, nas células, ainda repete
   o nome do elemento — `.mgxcmp .mgxcmp-tabela td.mgxcmp-td--mgx`. Isso
   vence a especificidade do tema sem precisar de `!important`; só a cor dos
   títulos leva `!important`, porque o construtor pinta heading por seletor
   de widget.

   COMPOSIÇÃO POR LARGURA
   ----------------------
   até 47.99rem (celular)  cada <tr> vira um cartão em grade. Sem rolagem
                           lateral, sem trilho, sem tabela espremida:
                             [ critério ......... linha toda ]
                             [ MGX .............. linha toda, em destaque ]
                             [ alt ] [ alt ] [ alt ]   (3 colunas)
                           Na linha marcada como derrota da MGX, a célula
                           marcada também abre a linha toda e as duas que
                           sobram ficam lado a lado — nunca 2 + 1 órfã.
                           Nas três alternativas curtas fica o valor; a prosa
                           vive na faixa da MGX e na faixa marcada.
   48rem+                  tabela de verdade, `table-layout: fixed` (largura
                           travada: nunca estoura) e cabeçalho grudado no
                           topo ao rolar.
   ========================================================================== */

.mgxcmp {
  /* identidade */
  --mgxcmp-azul: #00A7FF;
  --mgxcmp-azul-claro: #4DC3FF;
  --mgxcmp-azul-fundo: #04141F;   /* azul sólido; nada de branco a 10% */
  --mgxcmp-azul-borda: #0C4B6E;
  --mgxcmp-ambar-fundo: #0E0B04;
  --mgxcmp-ambar-borda: #3B2A08;
  --mgxcmp-texto: #FFFFFF;
  --mgxcmp-apoio: #D4D4D8;
  --mgxcmp-fraco: #8A8A94;
  --mgxcmp-ok: #22C55E;
  --mgxcmp-atencao: #F59E0B;
  --mgxcmp-fundo: #000000;
  --mgxcmp-caixa: #0A0A0D;
  --mgxcmp-caixa-topo: #0C0C11;
  --mgxcmp-linha: #1D1D24;
  --mgxcmp-raio: 1.25rem;
  --mgxcmp-raio-p: 0.75rem;

  /* altura da barra fixa do site: ajuste aqui se o cabeçalho mudar */
  --mgxcmp-topo: 4.5rem;

  position: relative;
  isolation: isolate;
  background: var(--mgxcmp-fundo);
  color: var(--mgxcmp-apoio);
  font-family: 'Outfit', system-ui, sans-serif;
  padding-block: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
  padding-inline: clamp(1rem, 0.5rem + 2.2vw, 3rem);
}

/* Granulação: o acabamento que separa fundo chapado de fundo feito por
   alguém. SVG embutido (nenhum arquivo a mais para o celular baixar), acima
   do fundo e abaixo do conteúdo, sem capturar clique. */
.mgxcmp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.mgxcmp__caixa {
  max-inline-size: 78rem;
  margin-inline: auto;
}

/* ---------- cabeçalho da seção ------------------------------------------ */

.mgxcmp__topo {
  display: grid;
  gap: 0.75rem;
  margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.mgxcmp__titulo {
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:800;
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--mgxcmp-texto) !important;
  margin: 0;
  text-wrap: balance;
  max-inline-size: 24ch;
}
.mgxcmp .mgxcmp__titulo b {
  color: var(--mgxcmp-azul) !important;
  font-weight:800;
}

.mgxcmp__linhafina {
  margin: 0;
  font-size: 1rem;
  line-height:1.6;
  color: var(--mgxcmp-apoio);
  max-inline-size: 62ch;
}

/* ---------- legenda da tabela (<caption>) -------------------------------- */

.mgxcmp .mgxcmp-tabela__legenda {
  caption-side: top;
  display: block;
  text-align: start;
  background: var(--mgxcmp-caixa);
  border: 1px solid var(--mgxcmp-linha);
  border-inline-start: 3px solid var(--mgxcmp-azul);
  border-radius: var(--mgxcmp-raio-p);
  padding: 0.875rem 1rem;
  margin-block-end: 1rem;
  font-size: 0.875rem;
  line-height:1.6;
  color: var(--mgxcmp-fraco);
}
.mgxcmp .mgxcmp-tabela__legenda-t {
  display: block;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:800;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--mgxcmp-azul-claro);
  margin-block-end: 0.25rem;
}
.mgxcmp .mgxcmp-tabela__legenda b { color: var(--mgxcmp-apoio); font-weight:600; }
.mgxcmp .mgxcmp-tabela__legenda time { color: var(--mgxcmp-apoio); }

/* ==========================================================================
   CELULAR (base) — cada linha é um cartão. Zero rolagem lateral.
   ========================================================================== */

.mgxcmp .mgxcmp-tabela {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  font-size: 1rem;              /* apaga o `font-size: 0.875rem` do tema */
  color: var(--mgxcmp-apoio);
}

.mgxcmp .mgxcmp-tabela thead {
  /* escondido aos olhos, presente na árvore de acessibilidade. O rótulo de
     cada coluna volta a aparecer no cartão pelo `data-coluna` da célula. */
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mgxcmp .mgxcmp-tabela tbody,
.mgxcmp .mgxcmp-tabela tfoot { display: block; }

.mgxcmp .mgxcmp-tabela tr.mgxcmp-tr {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: 0.5rem;
  row-gap: 0.625rem;
  background: var(--mgxcmp-caixa);
  border: 1px solid var(--mgxcmp-linha);
  border-radius: var(--mgxcmp-raio);
  padding: 0.9375rem 0.8125rem 1rem;
  margin-block-end: 0.75rem;
}

/* critério: o título do cartão */
.mgxcmp .mgxcmp-tabela th.mgxcmp-td-crit {
  grid-column: 1 / -1;
  order: 0;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--mgxcmp-linha);
  border-radius: 0;
  padding: 0 0 0.625rem;
  text-align: start;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:800;
  font-size: 0.875rem;
  line-height:1.35;
  letter-spacing: -0.01em;
  color: var(--mgxcmp-texto);
  overflow-wrap: break-word;
}

/* células */
.mgxcmp .mgxcmp-tabela td {
  order: 3;
  background: transparent;      /* mata a zebra e o hover do tema */
  border: 0;
  border-radius: 0;
  padding: 0;
  vertical-align: top;
  min-inline-size: 0;
  overflow-wrap: break-word;
}

/* O nome da coluna volta aqui quando a linha vira cartão. Em caixa baixa de
   propósito: rótulo miúdo em CAIXA ALTA é a assinatura de página gerada, e
   aqui ele apareceria nove vezes por tela. */
.mgxcmp .mgxcmp-tabela td[data-coluna]::before {
  content: attr(data-coluna);
  display: block;
  font-size: 0.75rem;
  font-weight:600;
  line-height:1.1;
  color: var(--mgxcmp-fraco);
  margin-block-end: 0.3125rem;
}

.mgxcmp .mgxcmp-dado {
  display: block;
  font-family: 'Montserrat', 'Outfit', sans-serif;
  font-weight:600;
  font-size: 0.875rem;
  line-height:1.1;
  letter-spacing: -0.005em;
  color: var(--mgxcmp-texto);
}
.mgxcmp .mgxcmp-dado--ok { color: var(--mgxcmp-ok); }
.mgxcmp .mgxcmp-dado--nao { color: var(--mgxcmp-fraco); }
.mgxcmp .mgxcmp-dado--atencao { color: var(--mgxcmp-atencao); }

.mgxcmp .mgxcmp-obs {
  display: block;
  margin-block-start: 0.375rem;
  font-size: 0.875rem;
  line-height:1.35;
  color: var(--mgxcmp-apoio);
}
.mgxcmp .mgxcmp-marca { color: var(--mgxcmp-azul-claro); font-weight:600; }

/* a coluna da MGX abre o cartão, na largura toda */
.mgxcmp .mgxcmp-tabela td.mgxcmp-td--mgx {
  grid-column: 1 / -1;
  order: 1;
  background: var(--mgxcmp-azul-fundo);
  border: 1px solid var(--mgxcmp-azul-borda);
  border-radius: var(--mgxcmp-raio-p);
  padding: 0.75rem 0.8125rem;
}
.mgxcmp .mgxcmp-tabela td.mgxcmp-td--mgx[data-coluna]::before { color: var(--mgxcmp-azul); }
.mgxcmp .mgxcmp-tabela td.mgxcmp-td--mgx .mgxcmp-dado { font-size: 1rem; }

/* a célula em que a MGX perde — aqui ou na coluna de outra opção */
.mgxcmp .mgxcmp-tabela td.mgxcmp-td--perde {
  background: var(--mgxcmp-ambar-fundo);
  border: 1px solid var(--mgxcmp-ambar-borda);
  border-radius: var(--mgxcmp-raio-p);
  padding: 0.75rem 0.8125rem;
}
.mgxcmp .mgxcmp-tabela td.mgxcmp-td--perde:not(.mgxcmp-td--mgx) {
  grid-column: 1 / -1;
  order: 2;
}
.mgxcmp .mgxcmp-tabela td.mgxcmp-td--perde[data-coluna]::before { color: var(--mgxcmp-atencao); }
.mgxcmp .mgxcmp-tabela td.mgxcmp-td--perde .mgxcmp-marca { color: var(--mgxcmp-atencao); }

@media (max-width: 47.99rem) {
  /* Nas alternativas curtas cabe o valor, não o comentário: em 360px cada
     uma das três colunas tem ~93px. A prosa está na faixa da MGX e na faixa
     marcada, que ocupam a linha toda. A partir de 48rem tudo reaparece. */
  .mgxcmp .mgxcmp-tabela td:not(.mgxcmp-td--mgx):not(.mgxcmp-td--perde):not(.mgxcmp-td--pe) .mgxcmp-obs {
    display: none;
  }
  /* sobraram duas alternativas na linha? então duas colunas, sem órfã */
  .mgxcmp .mgxcmp-tabela tr.mgxcmp-tr:has(> td.mgxcmp-td--perde:not(.mgxcmp-td--mgx)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* rodapé da tabela: o que nenhum dos quatro caminhos faz */
.mgxcmp .mgxcmp-tabela tr.mgxcmp-tr--pe {
  background: var(--mgxcmp-caixa-topo);
  border-color: var(--mgxcmp-azul-borda);
  margin-block-end: 0;
}
.mgxcmp .mgxcmp-tabela td.mgxcmp-td--pe {
  grid-column: 1 / -1;
  order: 1;
}
.mgxcmp .mgxcmp-tabela td.mgxcmp-td--pe .mgxcmp-dado {
  font-size: 1rem;
  color: var(--mgxcmp-azul-claro);
}

/* ==========================================================================
   48rem+ — tabela de verdade, com cabeçalho que gruda
   ========================================================================== */

@media (min-width: 48rem) {

  .mgxcmp .mgxcmp-tabela {
    display: table;
    table-layout: fixed;        /* a largura é travada: a tabela nunca estoura */
    inline-size: 100%;
  }
  .mgxcmp .mgxcmp-tabela thead {
    display: table-header-group;
    position: static;
    inline-size: auto;
    block-size: auto;
    clip-path: none;
    white-space: normal;
  }
  .mgxcmp .mgxcmp-tabela tbody { display: table-row-group; }
  .mgxcmp .mgxcmp-tabela tfoot { display: table-footer-group; }

  .mgxcmp .mgxcmp-tabela tr.mgxcmp-tr {
    display: table-row;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }

  /* A coluna da MGX é a mais larga da tabela: o destaque vem de tamanho,
     não só de cor. A última coluna fica com o que sobra (18%). */
  .mgxcmp .mgxcmp-col--criterio { inline-size: 21%; }
  .mgxcmp .mgxcmp-col { inline-size: 19%; }
  .mgxcmp .mgxcmp-col--mgx { inline-size: 23%; }

  /* cabeçalho grudado no topo ao rolar */
  .mgxcmp .mgxcmp-tabela th.mgxcmp-th {
    position: sticky;
    top: var(--mgxcmp-topo);
    z-index: 2;
    background: var(--mgxcmp-caixa-topo);
    border: 0;
    border-block-end: 2px solid var(--mgxcmp-linha);
    padding: 0.875rem 0.75rem;
    text-align: start;
    vertical-align: bottom;
  }
  .mgxcmp .mgxcmp-th__nome {
    display: block;
    font-family: 'Montserrat', 'Outfit', sans-serif;
    font-weight:800;
    font-size: 0.875rem;
    line-height:1.1;
    letter-spacing: -0.01em;
    color: var(--mgxcmp-texto);
  }
  .mgxcmp .mgxcmp-th__sub {
    display: block;
    margin-block-start: 0.25rem;
    font-size: 0.75rem;
    line-height:1.35;
    color: var(--mgxcmp-fraco);
  }
  .mgxcmp .mgxcmp-tabela th.mgxcmp-th--criterio { padding-inline-start: 0; }
  .mgxcmp .mgxcmp-tabela th.mgxcmp-th--mgx {
    background: var(--mgxcmp-azul-fundo);
    border-block-end-color: var(--mgxcmp-azul);
    border-start-start-radius: var(--mgxcmp-raio-p);
    border-start-end-radius: var(--mgxcmp-raio-p);
  }
  .mgxcmp .mgxcmp-tabela th.mgxcmp-th--mgx .mgxcmp-th__nome { color: var(--mgxcmp-azul-claro); }
  .mgxcmp .mgxcmp-tabela th.mgxcmp-th--mgx .mgxcmp-th__sub { color: var(--mgxcmp-apoio); }

  .mgxcmp .mgxcmp-tabela td,
  .mgxcmp .mgxcmp-tabela th.mgxcmp-td-crit {
    display: table-cell;
    order: 0;
    background: transparent;
    border: 0;
    border-block-end: 1px solid var(--mgxcmp-linha);
    border-radius: 0;
    padding: 0.9375rem 0.75rem;
    vertical-align: top;
  }
  .mgxcmp .mgxcmp-tabela th.mgxcmp-td-crit {
    font-size: 0.875rem;
    line-height:1.35;
    color: var(--mgxcmp-texto);
    padding-inline-start: 0;
  }
  .mgxcmp .mgxcmp-tabela td[data-coluna]::before { display: none; }

  .mgxcmp .mgxcmp-dado { font-size: 0.875rem; }
  .mgxcmp .mgxcmp-obs {
    display: block;
    font-size: 0.875rem;
    line-height:1.35;
    color: var(--mgxcmp-fraco);
  }

  /* a coluna da MGX fica acesa de cima a baixo */
  .mgxcmp .mgxcmp-tabela td.mgxcmp-td--mgx {
    background: var(--mgxcmp-azul-fundo);
    border: 0;
    border-block-end: 1px solid var(--mgxcmp-azul-borda);
    border-radius: 0;
    padding: 0.9375rem 0.75rem;
  }
  .mgxcmp .mgxcmp-tabela td.mgxcmp-td--mgx .mgxcmp-obs { color: var(--mgxcmp-apoio); }
  .mgxcmp .mgxcmp-tabela td.mgxcmp-td--mgx .mgxcmp-dado { font-size: 0.875rem; }

  /* a célula marcada como derrota fica âmbar, na coluna que for */
  .mgxcmp .mgxcmp-tabela td.mgxcmp-td--perde {
    background: var(--mgxcmp-ambar-fundo);
    border: 0;
    border-block-end: 1px solid var(--mgxcmp-ambar-borda);
    border-radius: 0;
    padding: 0.9375rem 0.75rem;
  }
  .mgxcmp .mgxcmp-tabela td.mgxcmp-td--perde .mgxcmp-obs { color: var(--mgxcmp-apoio); }

  /* a linha da derrota ganha um fio âmbar à esquerda */
  .mgxcmp .mgxcmp-tabela tr.mgxcmp-tr--perde th.mgxcmp-td-crit {
    box-shadow: inset 3px 0 0 var(--mgxcmp-atencao);
    padding-inline-start: 0.75rem;
  }

  /* rodapé */
  .mgxcmp .mgxcmp-tabela tr.mgxcmp-tr--pe th.mgxcmp-td-crit,
  .mgxcmp .mgxcmp-tabela td.mgxcmp-td--pe {
    background: var(--mgxcmp-caixa-topo);
    border-block-end: 0;
    border-block-start: 2px solid var(--mgxcmp-azul-borda);
    padding-block: 1.0625rem;
  }
  .mgxcmp .mgxcmp-tabela td.mgxcmp-td--pe .mgxcmp-obs { color: var(--mgxcmp-apoio); }
}

/* leitura mais folgada quando há espaço de sobra */
@media (min-width: 75rem) {
  .mgxcmp .mgxcmp-tabela td,
  .mgxcmp .mgxcmp-tabela th.mgxcmp-td-crit,
  .mgxcmp .mgxcmp-tabela td.mgxcmp-td--mgx,
  .mgxcmp .mgxcmp-tabela td.mgxcmp-td--perde { padding: 1.125rem 0.9375rem; }
}

/* ==========================================================================
   Movimento — cronometrado pela rolagem, sem uma linha de JavaScript.
   Se o navegador não conhecer `animation-timeline`, nada fica escondido:
   a regra inteira só existe dentro do @supports.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mgxcmp__topo,
    .mgxcmp .mgxcmp-tabela__legenda {
      animation: mgxcmp-entrar linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    /* No celular o <tr> é uma grade e aceita `transform`; em `table-row`,
       não — por isso a revelação por linha só existe abaixo de 48rem. */
    @media (max-width: 47.99rem) {
      .mgxcmp .mgxcmp-tabela tr.mgxcmp-tr {
        animation: mgxcmp-entrar linear both;
        animation-timeline: view();
        animation-range: entry 4% cover 22%;
      }
    }
    @media (min-width: 48rem) {
      .mgxcmp__quadro {
        animation: mgxcmp-entrar linear both;
        animation-timeline: view();
        animation-range: entry 2% cover 18%;
      }
    }
  }
}

@keyframes mgxcmp-entrar {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mgxcmp *,
  .mgxcmp *::before,
  .mgxcmp *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   CELULAR: 5 comparações à vista, 4 atrás de um toque (23/09/2026)

   Medido a 360px: 9 linhas × ~260px + abertura = 4,1 telas (teto da
   doutrina: 2,5). Nenhuma linha é descartável, então nenhuma some: as 4
   de baixo esperam atrás de "Ver as outras 4 comparações".

   As duas linhas em que a MGX PERDE (custo para entrar e atenção dedicada
   ao seu caso) estão entre as 5 visíveis: honestidade não vai para o
   acordeão. Sem JavaScript — caixa de seleção + :has().
   ========================================================================== */
.mgxcmp-mais-cb {
  position: absolute; inline-size: 1px; block-size: 1px;
  opacity: 0; pointer-events: none;
}
.mgxcmp-mais { display: none; }

@media (max-width: 47.99rem) {
  .mgxcmp:not(:has(.mgxcmp-mais-cb:checked)) .mgxcmp-tabela tbody tr:nth-child(n+6),
  .mgxcmp:not(:has(.mgxcmp-mais-cb:checked)) .mgxcmp-tabela tfoot {
    display: none !important;
  }

  .mgxcmp-mais {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-block-size: 48px;                 /* alvo de toque */
    margin: 1rem auto 0;
    padding-inline: 1.25rem;
    inline-size: fit-content;
    border-radius: 999px;
    border: 1px solid rgba(0, 167, 255, 0.40);
    background: rgba(0, 167, 255, 0.08);
    color: #4DC3FF;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
  }
  .mgxcmp-mais-cb:focus-visible + .mgxcmp__quadro .mgxcmp-mais { outline: 2px solid #00A7FF; outline-offset: 3px; }
  .mgxcmp-mais__fechar { display: none; }
  .mgxcmp:has(.mgxcmp-mais-cb:checked) .mgxcmp-mais__abrir { display: none; }
  .mgxcmp:has(.mgxcmp-mais-cb:checked) .mgxcmp-mais__fechar { display: inline; }

  /* a legenda "Como comparar esta tabela" é instrução de leitura, não
     comparação: sai da vista no celular, fica para leitor de tela */
  .mgxcmp-tabela__legenda {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 23/09/2026 — a legenda escondida no celular ficava com 643px de caixa: a
   regra de 1px perdia em especificidade para `.mgxcmp .mgxcmp-tabela__legenda`
   (display/padding). O recorte (clip-path) escondia a pintura, mas a caixa
   larga estourava a página por baixo. Agora o padrão só-leitor é inteiro. */
@media (max-width: 47.99rem) {
  .mgxcmp .mgxcmp-tabela__legenda {
    inline-size: 1px !important; block-size: 1px !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important;
    overflow: hidden !important;
  }
}