/*
 * CSS não crítico — carrega sem bloquear a renderização.
 *
 * Só o que aparece depois de rolar: corpo do artigo, coluna lateral, blocos
 * editoriais, rodapé e paginação.
 */

/* --- coluna lateral -------------------------------------------------------- */

.rmm-lado { display: grid; gap: 1.25rem; align-content: start; }

.rmm-lado__bloco {
  padding: 1.125rem;
  border: 1px solid var(--rmm-linha);
  border-radius: var(--rmm-raio);
  background: var(--rmm-superficie);
}

.rmm-lado__bloco--destaque { background: #fff; }

.rmm-lado__titulo {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rmm-suave);
  margin-bottom: 0.75rem;
}

.rmm-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; counter-reset: r; }

.rmm-ranking li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; align-items: start; }

.rmm-ranking__n {
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--rmm-marca); color: #fff;
  font-size: 0.75rem; font-weight: 700;
}

.rmm-ranking a,
.rmm-lado__lista a {
  color: var(--rmm-texto); text-decoration: none;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.35;
}
.rmm-ranking a:hover,
.rmm-lado__lista a:hover { color: var(--rmm-cor); }

.rmm-lado__lista { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.6rem; }
.rmm-lado__todos { font-size: 0.8125rem; font-weight: 600; text-decoration: none; }

/* --- corpo do artigo -------------------------------------------------------- */

.rmm-post__conteudo a { text-underline-offset: 2px; }
.rmm-post__conteudo ul,
.rmm-post__conteudo ol { padding-left: 1.2rem; }
.rmm-post__conteudo li { margin-bottom: 0.35rem; }

.rmm-post__conteudo blockquote {
  margin-inline: 0; padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid var(--rmm-cor); color: var(--rmm-suave);
}

.rmm-post__conteudo img { border-radius: 10px; }
.rmm-post__conteudo figcaption { margin-top: 0.4rem; color: var(--rmm-suave); font-size: 0.8125rem; }

.rmm-post__rodape { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rmm-linha); }
.rmm-aviso { margin: 0 0 0.875rem; color: var(--rmm-suave); font-size: 0.8125rem; line-height: 1.5; }
.rmm-tags { font-size: 0.8125rem; }

/* --- caixa de autor ---------------------------------------------------------- */

.rmm-autor {
  display: flex; gap: 0.875rem; align-items: start;
  margin-bottom: 1.5rem; padding: 1rem;
  border: 1px solid var(--rmm-linha); border-radius: var(--rmm-raio);
}
.rmm-autor__foto { border-radius: 50%; flex-shrink: 0; }
.rmm-autor__nome { margin: 0 0 0.2rem; font-weight: 600; }
.rmm-autor__bio { margin: 0; color: var(--rmm-suave); font-size: 0.875rem; }

/* --- relacionados ------------------------------------------------------------- */

.rmm-relacionados { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--rmm-linha); }
.rmm-relacionados h2 { font-size: 1.25rem; margin-bottom: 1.25rem; }

/* --- paginação e busca ---------------------------------------------------------- */

.pagination { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding-inline: 0.6rem;
  border: 1px solid var(--rmm-linha); border-radius: 8px;
  text-decoration: none; font-size: 0.9375rem;
}
.pagination .current { background: var(--rmm-marca); border-color: var(--rmm-marca); color: #fff; }

.rmm-busca { display: flex; gap: 0.4rem; margin-block: 1rem; }
.rmm-busca input {
  flex: 1; min-height: 2.5rem; padding-inline: 0.7rem;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 8px;
  background: rgba(255,255,255,0.12); color: #fff;
  /* 16px é o piso: abaixo disso o Safari do iPhone dá zoom ao focar o campo. */
  font-size: 16px;
}
.rmm-busca input::placeholder { color: rgba(255,255,255,0.65); }
.rmm-busca button {
  min-height: 2.5rem; padding-inline: 0.9rem; border: 0; border-radius: 8px;
  background: #fff; color: var(--rmm-marca); font: inherit; font-weight: 600; cursor: pointer;
}
.rmm-vazio { padding-block: 2rem; }

/* Fora da faixa de marca a busca volta ao esquema claro. */
.rmm-vazio .rmm-busca input,
.rmm-principal .rmm-busca input { border-color: var(--rmm-linha); background: #fff; color: var(--rmm-texto); }
.rmm-vazio .rmm-busca input::placeholder,
.rmm-principal .rmm-busca input::placeholder { color: var(--rmm-suave); }
.rmm-vazio .rmm-busca button,
.rmm-principal .rmm-busca button { background: var(--rmm-marca); color: #fff; }

/* --- blocos editoriais ------------------------------------------------------------ */

.rmm-destaque {
  margin-block: 1.75rem; padding: 1rem 1.125rem;
  border-left: 4px solid var(--rmm-cor); background: #f2f6fe;
  border-radius: 0 var(--rmm-raio) var(--rmm-raio) 0;
}
.rmm-destaque__titulo { margin: 0 0 0.35rem; font-weight: 700; }
.rmm-destaque p:last-child { margin-bottom: 0; }

.rmm-pc { display: grid; gap: 0.875rem; margin-block: 1.75rem; }
.rmm-pc__col { padding: 1rem 1.125rem; border: 1px solid var(--rmm-linha); border-radius: var(--rmm-raio); }
.rmm-pc__col h3 { margin: 0 0 0.5rem; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.05em; }
.rmm-pc__col--sim { border-color: #bfe3c8; background: #f4fbf6; }
.rmm-pc__col--sim h3 { color: #0a7a43; }
.rmm-pc__col--nao { border-color: #f0d5b8; background: #fdf8f2; }
.rmm-pc__col--nao h3 { color: #a5580f; }
.rmm-pc ul { margin: 0; padding-left: 1.1rem; font-size: 0.9375rem; }
.rmm-pc li { margin-bottom: 0.3rem; }

/* --- comparativo ------------------------------------------------------------
 *
 * Duas apresentações do mesmo HTML, sem JavaScript.
 *
 * **Celular (padrão): a tabela vira pilha de cards.** Cada card é um critério,
 * e dentro dele cada opção aparece rotulada pelo `data-col`. Agrupar por
 * critério é o que permite comparar — as duas respostas ficam lado a lado na
 * mesma tela. A alternativa comum, rolagem horizontal, obriga a arrastar de
 * lado para ver o segundo valor, e é por isso que comparativo em celular quase
 * nunca é lido até o fim.
 *
 * **A partir de 48rem vira tabela de verdade**, que é o formato certo quando há
 * largura para as colunas coexistirem.
 */

.rmm-vs { margin-block: 1.75rem; }
.rmm-vs__titulo { margin: 0 0 0.75rem; font-weight: 700; font-size: 1.0625rem; }
.rmm-vs__nota { margin: 0.6rem 0 0; color: var(--rmm-suave); font-size: 0.75rem; }

.rmm-vs__tabela { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.rmm-vs__tabela thead { display: none; }
.rmm-vs__tabela tbody,
.rmm-vs__tabela tr,
.rmm-vs__tabela th,
.rmm-vs__tabela td { display: block; }

.rmm-vs__tabela tr {
  border: 1px solid var(--rmm-linha);
  border-radius: var(--rmm-raio);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.rmm-vs__tabela tbody th[scope="row"] {
  background: var(--rmm-superficie);
  padding: 0.6rem 0.875rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rmm-suave);
  border-bottom: 1px solid var(--rmm-linha);
}

.rmm-vs__tabela td {
  padding: 0.6rem 0.875rem;
  border-bottom: 1px solid var(--rmm-linha);
}
.rmm-vs__tabela td:last-child { border-bottom: 0; }

.rmm-vs__tabela td::before {
  content: attr(data-col);
  display: block;
  color: var(--rmm-cor);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.rmm-vs__tabela td.is-destaque { background: #f2f8f4; }
.rmm-vs__tabela td.is-destaque::before { color: #0a7a43; }

.rmm-vs__selo {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #0a7a43;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

@media (min-width: 48rem) {
  .rmm-vs__rolagem { overflow-x: auto; }

  .rmm-vs__tabela thead { display: table-header-group; }
  .rmm-vs__tabela tbody { display: table-row-group; }
  .rmm-vs__tabela tr { display: table-row; border: 0; border-radius: 0; margin: 0; }
  .rmm-vs__tabela th,
  .rmm-vs__tabela td { display: table-cell; border: 1px solid var(--rmm-linha); vertical-align: top; }

  .rmm-vs__tabela td::before { display: none; }

  .rmm-vs__tabela thead th {
    padding: 0.7rem 0.875rem;
    background: var(--rmm-superficie);
    text-align: left;
    font-size: 0.9375rem;
    border: 1px solid var(--rmm-linha);
  }
  .rmm-vs__canto { background: transparent !important; border: 0 !important; }

  .rmm-vs__tabela thead th.is-destaque { background: #eaf6ee; }
  .rmm-vs__tabela tbody th[scope="row"] {
    width: 30%;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9375rem;
    color: var(--rmm-texto);
    border-bottom: 1px solid var(--rmm-linha);
  }
}

/* --- CTA --------------------------------------------------------------------------- */

.rmm-cta-bloco { display: grid; gap: 0.4rem; justify-items: center; margin-block: 1.75rem; }
.rmm-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding-inline: 1.6rem;
  background: var(--rmm-cor); color: #fff; border-radius: 10px;
  font-weight: 700; text-decoration: none; text-align: center;
}
.rmm-cta:hover { background: var(--rmm-marca); }
.rmm-cta__nota { color: var(--rmm-suave); font-size: 0.75rem; text-align: center; }

/* --- recomendação -------------------------------------------------------------------- */

.rmm-rec__inst { margin: 0 0 1rem; color: var(--rmm-suave); font-weight: 600; }
.rmm-ficha {
  display: grid; gap: 0.75rem; margin-block: 1.5rem; padding: 1rem;
  border: 1px solid var(--rmm-linha); border-radius: var(--rmm-raio); background: var(--rmm-superficie);
}
.rmm-ficha dt { color: var(--rmm-suave); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.rmm-ficha dd { margin: 0.15rem 0 0; font-weight: 700; }

.rmm-lista-check { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.rmm-lista-check li { padding-left: 1.5rem; position: relative; }
.rmm-lista-check li::before { content: "✓"; position: absolute; left: 0; color: #0a7a43; font-weight: 700; }
.rmm-lista-check--req li::before { content: "•"; color: var(--rmm-suave); }

/* --- rodapé ------------------------------------------------------------------------------ */

.rmm-rodape {
  margin-top: 3rem; padding-block: 2.5rem 2rem;
  background: var(--rmm-superficie); border-top: 1px solid var(--rmm-linha);
  font-size: 0.875rem;
}

.rmm-rodape__topo {
  display: grid; gap: 1.75rem;
  padding-bottom: 1.75rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rmm-linha);
}

.rmm-rodape .rmm-logo { color: var(--rmm-marca); }
.rmm-rodape__tagline { margin: 0.6rem 0 0; color: var(--rmm-suave); max-width: 26rem; }

.rmm-rodape h2 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--rmm-suave); margin-bottom: 0.6rem;
}
.rmm-rodape__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.rmm-rodape__nav a { color: var(--rmm-texto); text-decoration: none; }
.rmm-rodape__nav a:hover { text-decoration: underline; }
.rmm-rodape__contato p { margin: 0 0 0.6rem; color: var(--rmm-suave); line-height: 1.55; }
.rmm-rodape__dpo { font-size: 0.8125rem; }

.rmm-rodape__avisos .rmm-aviso { font-size: 0.75rem; line-height: 1.55; }

.rmm-aviso--forte {
  padding: 0.7rem 0.9rem; margin-bottom: 1.25rem;
  border-left: 3px solid #b3261e; background: #fdf4f3;
  color: #7a1d16 !important; font-weight: 500; border-radius: 0 8px 8px 0;
}

.rmm-copyright { margin: 1rem 0 0; color: var(--rmm-suave); font-size: 0.8125rem; }

.rmm-aviso-editorial { font-size: 0.8125rem; }

@media (min-width: 48rem) {
  .rmm-pc { grid-template-columns: 1fr 1fr; }
  .rmm-ficha { grid-template-columns: repeat(3, 1fr); }
  .rmm-rodape__topo { grid-template-columns: 1.6fr 1fr 1.2fr; gap: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}