/* ============================================================================
   QIM — componentes de interface (porte CSS dos primitivos React do
   design system em .claude/skills/qim-design-system/components/).

   Depende de assets/css/qim-tokens.css — carregue-o antes.
   Tudo é escopado em `.qim` para não vazar sobre os temas do portal
   (magazine/classic) nem sobre o CSS legado `.gx-*` do marketing.

   Uso mínimo numa view:
     <div class="qim">
        ... markup com as classes abaixo ...
     </div>
   ========================================================================= */

.qim {
    font-family: var(--qim-font-sans);
    color: var(--qim-text-body);
    background: var(--qim-surface-page);
    font-size: var(--qim-text-md);
    line-height: var(--qim-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.qim *,
.qim *::before,
.qim *::after { box-sizing: border-box; }

.qim a { color: var(--qim-text-link); text-decoration: none; }
.qim a:hover { color: var(--qim-text-link-hover); }

.qim :focus-visible {
    outline: none;
    box-shadow: var(--qim-focus-ring);
    border-radius: 4px;
}

/* ---------------------------------------------------------------- layout -- */

.qim-wrap {
    width: 100%;
    max-width: var(--qim-content-max);
    margin: 0 auto;
    padding-left: var(--qim-gutter);
    padding-right: var(--qim-gutter);
}

.qim-section { padding-top: var(--qim-section-y); padding-bottom: var(--qim-section-y); }
.qim-section--tight { padding-top: var(--qim-space-7); padding-bottom: var(--qim-space-7); }

/* Bloco full-bleed Tinta: hero, rodapé, cabeçalho de curso. Nunca gradiente. */
.qim-band--ink { background: var(--qim-surface-inverse); color: var(--qim-text-on-inverse); }
.qim-band--ink .qim-h1,
.qim-band--ink .qim-h2,
.qim-band--ink .qim-h3 { color: var(--qim-text-on-inverse); }
/* Card claro DENTRO da faixa Tinta: o texto volta a ser Tinta.
   Sem isto a regra acima pintava de branco um título que está sobre fundo
   branco — contraste 1:1, texto invisível. Era o caso do formulário da
   landing da newsletter ("Recibe Sin Ruido"), e valeria para qualquer card
   claro em hero escuro. A faixa define a cor do FUNDO dela, não a de uma
   superfície que traz o próprio fundo. */
.qim-band--ink .qim-card:not(.qim-card--ink),
.qim-band--ink .qim-card:not(.qim-card--ink) .qim-h1,
.qim-band--ink .qim-card:not(.qim-card--ink) .qim-h2,
.qim-band--ink .qim-card:not(.qim-card--ink) .qim-h3 { color: var(--qim-text-strong); }
.qim-band--ink .qim-card:not(.qim-card--ink) p { color: var(--qim-text-body); }
.qim-band--ivory { background: var(--qim-surface-page); }
.qim-band--white { background: var(--qim-white); }

/* Medida de leitura editorial — corpo de artigo sempre dentro dela. */
.qim-measure { max-width: var(--qim-measure-editorial); }

.qim-grid { display: grid; gap: var(--qim-space-5); }
.qim-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qim-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qim-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
    .qim-grid--3, .qim-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qim-section { padding-top: var(--qim-space-7); padding-bottom: var(--qim-space-7); }
}
@media (max-width: 575.98px) {
    .qim-grid--2, .qim-grid--3, .qim-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ tipografia -- */

.qim-hero-title {
    font-family: var(--qim-font-sans);
    font-weight: var(--qim-weight-black);
    font-size: var(--qim-text-hero);
    line-height: var(--qim-leading-tight);
    letter-spacing: var(--qim-tracking-tight);
    color: var(--qim-text-strong);
    margin: 0;
    text-wrap: balance;
}

.qim-h1, .qim-h2, .qim-h3 {
    margin: 0;
    color: var(--qim-text-strong);
    letter-spacing: var(--qim-tracking-tight);
    text-wrap: pretty;
    /* Rede de segurança: uma palavra longa num título nunca deve empurrar a
       página. Em 326px, "trabajamos" a 52px media 276px e criava rolagem. */
    overflow-wrap: break-word;
}
/* Escala fluida: os títulos de hero usam .qim-h1 e precisam caber desde 326px
   sem depender de media query por página. */
.qim-h1 { font-size: clamp(1.9rem, 5.5vw, 3.25rem); font-weight: var(--qim-weight-bold); line-height: var(--qim-leading-tight); }
.qim-h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: var(--qim-weight-bold); line-height: var(--qim-leading-snug); }
.qim-h3 { font-size: clamp(1.15rem, 2.4vw, 1.75rem); font-weight: var(--qim-weight-semibold); line-height: var(--qim-leading-snug); }

/* Título editorial longo, abertura de matéria e citação usam a serifa. */
.qim-title--serif {
    font-family: var(--qim-font-serif);
    font-weight: var(--qim-weight-semibold);
    letter-spacing: var(--qim-tracking-normal);
}

.qim-lead {
    font-family: var(--qim-font-serif);
    font-size: var(--qim-text-lg);
    line-height: var(--qim-leading-relaxed);
    color: var(--qim-text-body);
    margin: 0;
    text-wrap: pretty;
}

/* Corpo de artigo. Aplique no container do conteúdo renderizado. */
.qim-prose {
    font-family: var(--qim-font-serif);
    font-size: 1.0625rem;
    line-height: var(--qim-leading-relaxed);
    color: var(--qim-text-body);
    max-width: var(--qim-measure-editorial);
}
.qim-prose h2, .qim-prose h3 {
    font-family: var(--qim-font-sans);
    color: var(--qim-text-strong);
    letter-spacing: var(--qim-tracking-tight);
    margin: var(--qim-space-7) 0 var(--qim-space-3);
}
.qim-prose h2 { font-size: var(--qim-text-xl); font-weight: var(--qim-weight-bold); }
.qim-prose h3 { font-size: var(--qim-text-lg); font-weight: var(--qim-weight-semibold); }
.qim-prose p { margin: 0 0 var(--qim-space-5); }
.qim-prose a {
    color: var(--qim-text-strong);
    box-shadow: inset 0 -3px 0 var(--qim-action-editorial-underline);
    transition: box-shadow var(--qim-duration-base) var(--qim-ease);
}
.qim-prose a:hover { box-shadow: inset 0 -10px 0 var(--qim-action-editorial-underline); color: var(--qim-text-strong); }
/* Contraste do link no corpo do artigo (WCAG AA, CLAUDE §14).
   O tema legado define `.post-content .post-text a { color: var(--vr-theme-color) }`,
   que resolve para Decisión #18A67A e dá 3,10:1 sobre branco — abaixo dos 4,5:1
   exigidos para texto normal. A regra `.qim-prose a` perdia por especificidade.
   Repetimos o seletor legado aqui, que carrega depois do tema, para os links
   editoriais do corpo ficarem em Tinta (14,6:1) com o sublinhado Claridad.
   Vale para os 50 links de cluster injetados e para as fontes primárias. */
.post-content .post-text a,
.section-page .page-text a {
    color: var(--qim-text-strong);
    box-shadow: inset 0 -3px 0 var(--qim-action-editorial-underline);
}
.post-content .post-text a:hover,
.section-page .page-text a:hover {
    color: var(--qim-text-strong);
    box-shadow: inset 0 -10px 0 var(--qim-action-editorial-underline);
}

.qim-prose ul, .qim-prose ol { margin: 0 0 var(--qim-space-5); padding-left: var(--qim-space-5); }
.qim-prose li { margin-bottom: var(--qim-space-2); }

/* Números, datas, fontes e etiquetas de dados. Nunca em parágrafo. */
.qim-data {
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-data);
    color: var(--qim-text-muted);
}

/* Sobretítulo: única situação de caixa alta junto com etiquetas curtas. */
.qim-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--qim-text-xs);
    font-weight: var(--qim-weight-bold);
    letter-spacing: var(--qim-tracking-wide);
    text-transform: uppercase;
    color: var(--qim-decision);
    margin: 0 0 var(--qim-space-3);
}
.qim-eyebrow--ink { color: var(--qim-text-muted); }
.qim-eyebrow--white { color: rgba(255, 255, 255, .72); }
.qim-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .35;
}
.qim-eyebrow--norule::after { display: none; }

/* --------------------------------------------------------------- botões --- */

.qim .qim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--qim-font-sans);
    font-weight: var(--qim-weight-semibold);
    font-size: var(--qim-text-md);
    line-height: 1.1;
    letter-spacing: var(--qim-tracking-tight);
    padding: 12px 20px;
    border-radius: var(--qim-radius-button);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--qim-duration-fast) var(--qim-ease),
                color var(--qim-duration-fast) var(--qim-ease),
                border-color var(--qim-duration-fast) var(--qim-ease),
                transform var(--qim-duration-fast) var(--qim-ease);
}
/* Um botão nunca deve estourar o container: rótulos longos sem espaço (um
   e-mail de contato, por exemplo) quebravam a página em 326px. */
.qim .qim-btn { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.qim .qim-btn:active { transform: translateY(var(--qim-translate-press)); }
.qim .qim-btn[disabled], .qim .qim-btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; }
.qim .qim-btn--sm { font-size: var(--qim-text-sm); padding: 8px 14px; gap: 6px; }
.qim .qim-btn--lg { font-size: var(--qim-text-lg); padding: 16px 28px; gap: 10px; }
.qim .qim-btn--block { display: flex; width: 100%; }

.qim .qim-btn--primary { background: var(--qim-action-primary-bg); color: var(--qim-action-primary-fg); }
.qim .qim-btn--primary:hover { background: var(--qim-action-primary-bg-hover); color: var(--qim-action-primary-fg); }

.qim .qim-btn--secondary {
    background: transparent;
    color: var(--qim-action-secondary-fg);
    border-color: var(--qim-action-secondary-border);
}
.qim .qim-btn--secondary:hover { background: var(--qim-action-secondary-bg-hover); color: var(--qim-action-secondary-fg); }

/* Editorial: o sublinhado Claridad CRESCE de 3px para 10px. Não é opacidade. */
.qim .qim-btn--editorial {
    background: transparent;
    color: var(--qim-text-strong);
    padding: 6px 0;
    border-radius: 0;
    box-shadow: inset 0 -3px 0 var(--qim-action-editorial-underline);
    transition: box-shadow var(--qim-duration-base) var(--qim-ease);
}
.qim .qim-btn--editorial:hover { box-shadow: inset 0 -10px 0 var(--qim-action-editorial-underline); color: var(--qim-text-strong); }

.qim .qim-btn--inverse { background: transparent; color: var(--qim-white); border-color: var(--qim-white); }
.qim .qim-btn--inverse:hover { background: var(--qim-white); color: var(--qim-ink); }

/* --------------------------------------------------------------- cards ---- */

.qim-card {
    background: var(--qim-surface-card);
    color: var(--qim-text-body);
    border: 1px solid var(--qim-border-subtle);
    border-radius: var(--qim-radius-card);
    padding: var(--qim-space-5);
    box-shadow: var(--qim-shadow-card);
    transition: box-shadow var(--qim-duration-base) var(--qim-ease),
                transform var(--qim-duration-base) var(--qim-ease);
}
.qim-card--interactive { cursor: pointer; }
.qim-card--interactive:hover { box-shadow: var(--qim-shadow-lifted); transform: translateY(-2px); }
.qim-card--ivory { background: var(--qim-surface-page); }
.qim-card--ink { background: var(--qim-surface-inverse); color: var(--qim-text-on-inverse); border-color: transparent; }
.qim-card--highlight { background: var(--qim-surface-highlight); color: var(--qim-ink); border-color: transparent; }
.qim-card--flush { padding: 0; overflow: hidden; }

/* Card de notícia/guia. Todo card responde: o que é · por que importa ·
   quanto tempo leva · qual o próximo passo. */
.qim-article-card { display: flex; flex-direction: column; }
/* `height: auto` é obrigatório aqui, não é cosmético. Os <img> trazem os
   atributos width/height (416x247) para reservar espaço e evitar CLS. Esses
   atributos entram como dica de apresentação e definem `height: 247px`; e
   `aspect-ratio` só governa o tamanho quando UMA das dimensões é `auto`. Sem
   isto, a capa era desenhada num quadro 562x247 (≈2,27) e o `cover` comia a
   faixa de cima da ilustração — justo onde a arte traz os rótulos. Valeu para
   todas as capas do portal enquanto ninguém mediu a caixa real no DOM. */
.qim-article-card__media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--qim-ratio-media);
    object-fit: cover;
}
.qim-article-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--qim-space-5);
    flex: 1;
}
.qim-article-card__meta-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qim-article-card__title {
    margin: 0;
    font-family: var(--qim-font-serif);
    font-weight: var(--qim-weight-semibold);
    font-size: var(--qim-text-xl);
    line-height: var(--qim-leading-snug);
    color: var(--qim-text-strong);
    text-wrap: pretty;
}
.qim-article-card__summary {
    margin: 0;
    font-size: var(--qim-text-sm);
    line-height: var(--qim-leading-relaxed);
    color: var(--qim-text-body);
    text-wrap: pretty;
}
.qim-article-card__meta {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: auto;
    padding-top: 6px;
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-data);
    color: var(--qim-text-muted);
}
.qim-article-card--horizontal { flex-direction: row; }
/* As capas do portal são ilustrações 16:9 com rótulos dentro da arte
   ("Liquidez", "28 días"). Com `aspect-ratio: auto` a altura vinha do texto ao
   lado e o recorte comia justamente as palavras que explicam a figura; com
   `contain`, a ilustração encolhia até sumir. Manter a proporção da própria arte
   resolve os dois: a imagem aparece inteira e a altura do cartão é previsível. */
.qim-article-card--horizontal .qim-article-card__media {
    width: 38%;
    flex: none;
    align-self: stretch;
    aspect-ratio: var(--qim-ratio-media);
    height: auto;
    object-fit: cover;
}
.qim-article-card--horizontal > a { display: block; width: 38%; flex: none; }
.qim-article-card--horizontal > a .qim-article-card__media { width: 100%; }
.qim-article-card--horizontal .qim-article-card__title { font-size: var(--qim-text-xl); }
@media (max-width: 575.98px) {
    .qim-article-card--horizontal { flex-direction: column; }
    .qim-article-card--horizontal .qim-article-card__media { width: 100%; aspect-ratio: var(--qim-ratio-media); }
}

/* Compacto: para a coluna de apoio e para a pilha ao lado do destaque, onde o
   cartão divide espaço com o texto e a capa roubaria a atenção da leitura. */
.qim-article-card--compact .qim-article-card__body { padding: var(--qim-space-4); gap: 8px; }
.qim-article-card--compact .qim-article-card__title { font-size: var(--qim-text-md); }
.qim-article-card--compact .qim-article-card__summary { font-size: var(--qim-text-xs); }

/* Ilustrações com texto embutido (rótulos dentro da arte) perdiam palavras no
   recorte 16/9 do `object-fit: cover`. Onde a capa é ilustração e não foto, o
   enquadramento respeita a peça inteira sobre o marfil da marca. */
.qim-article-card__media--contain { object-fit: contain; background: var(--qim-surface-page); }

/* ------------------------------------------------------ etiquetas e selos -- */

.qim-tag {
    display: inline-flex;
    align-items: center;
    font-weight: var(--qim-weight-semibold);
    font-size: var(--qim-text-sm);
    letter-spacing: var(--qim-tracking-wide);
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--qim-radius-pill);
    background: var(--qim-ink-08);
    color: var(--qim-text-strong);
}
.qim-tag--sm { font-size: var(--qim-text-xs); padding: 4px 10px; }
.qim-tag--ink { background: var(--qim-ink); color: var(--qim-white); }
.qim-tag--decision { background: var(--qim-decision-wash); color: var(--qim-ink); }
.qim-tag--clarity { background: var(--qim-clarity); color: var(--qim-ink); }
.qim-tag--signal { background: var(--qim-signal-wash); color: var(--qim-ink); }
.qim-tag--outline { background: transparent; color: var(--qim-text-strong); box-shadow: inset 0 0 0 1px var(--qim-border-subtle); }

/* Selo das sete séries proprietárias — distinto da cápsula de categoria. */
.qim-series {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--qim-text-xs);
    font-weight: var(--qim-weight-bold);
    letter-spacing: var(--qim-tracking-wide);
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--qim-ink-08);
    color: var(--qim-ink);
}
.qim-series--en-claro { background: var(--qim-clarity); color: var(--qim-ink); }
.qim-series--sin-ruido { background: var(--qim-ink); color: var(--qim-white); }
.qim-series--antes-de-invertir { background: var(--qim-decision); color: var(--qim-ink); }
.qim-series--mito-o-dato { background: var(--qim-signal); color: var(--qim-ink); }
.qim-series--en-numeros { background: var(--qim-graphite); color: var(--qim-white); }
.qim-series--tu-pregunta { background: var(--qim-ink-08); color: var(--qim-ink); }
.qim-series--paso-a-paso { background: var(--qim-ink-08); color: var(--qim-ink); }

/* Escala de certeza do guia de voz — obrigatória quando o texto afirma algo
   que não é fato confirmado. es · suele · puede · probable · depende · desconocido */
.qim-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: var(--qim-text-xs);
    font-weight: var(--qim-weight-bold);
    letter-spacing: var(--qim-tracking-wide);
    text-transform: uppercase;
    background: var(--qim-ink-08);
    color: var(--qim-ink);
}
.qim-chip--es { background: var(--qim-decision-wash); }
.qim-chip--probable { background: var(--qim-clarity); }
.qim-chip--depende { background: var(--qim-signal-wash); }
.qim-chip--desconocido { background: transparent; color: var(--qim-text-muted); box-shadow: inset 0 0 0 1px var(--qim-border-subtle); }
.qim-chip__hint { font-weight: var(--qim-weight-regular); text-transform: none; letter-spacing: 0; opacity: .7; }

/* ------------------------------------------------------------ editorial --- */

/* Aviso editorial-base. Vai no corpo, antes do CTA — nunca escondido no rodapé. */
.qim-disclaimer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: var(--qim-space-4);
    border-radius: var(--qim-radius-media);
    background: var(--qim-ink-08);
    font-family: var(--qim-font-sans);
}
.qim-disclaimer--alert { background: var(--qim-signal-wash); }
.qim-disclaimer p {
    margin: 0;
    font-size: var(--qim-text-xs);
    line-height: var(--qim-leading-relaxed);
    color: var(--qim-text-body);
    text-wrap: pretty;
}

.qim-stat { display: flex; flex-direction: column; gap: 6px; }
.qim-stat__value {
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-2xl);
    font-weight: var(--qim-weight-medium);
    letter-spacing: var(--qim-tracking-tight);
    line-height: 1;
    color: var(--qim-ink);
}
.qim-stat__value--decision { color: var(--qim-decision); }
.qim-stat__value--signal { color: var(--qim-signal); }
.qim-stat__unit { font-size: var(--qim-text-lg); margin-left: 4px; }
.qim-stat__label {
    font-size: var(--qim-text-sm);
    font-weight: var(--qim-weight-semibold);
    color: var(--qim-text-strong);
    line-height: var(--qim-leading-normal);
}
/* Todo número traz fonte, período e unidade. */
.qim-stat__source { font-family: var(--qim-font-data); font-size: var(--qim-text-xs); color: var(--qim-text-muted); }
.qim-band--ink .qim-stat__value { color: var(--qim-white); }
.qim-band--ink .qim-stat__label { color: rgba(255, 255, 255, .9); }
.qim-band--ink .qim-stat__source { color: rgba(255, 255, 255, .6); }

.qim-quote {
    margin: var(--qim-space-6) 0;
    padding: var(--qim-space-5) 0;
    border-top: 1px solid var(--qim-border-subtle);
    border-bottom: 1px solid var(--qim-border-subtle);
}
.qim-quote p {
    margin: 0;
    font-family: var(--qim-font-serif);
    font-size: var(--qim-text-xl);
    font-weight: var(--qim-weight-regular);
    line-height: var(--qim-leading-snug);
    color: var(--qim-text-strong);
    text-wrap: pretty;
}
.qim-quote footer {
    margin-top: 12px;
    font-family: var(--qim-font-sans);
    font-size: var(--qim-text-xs);
    font-weight: var(--qim-weight-semibold);
    letter-spacing: var(--qim-tracking-wide);
    text-transform: uppercase;
    color: var(--qim-text-muted);
}
.qim-band--ink .qim-quote { border-color: rgba(255, 255, 255, .2); }
.qim-band--ink .qim-quote p { color: var(--qim-white); }
.qim-band--ink .qim-quote footer { color: rgba(255, 255, 255, .6); }

/* Estrutura "Qué pasó / Por qué importa / Qué considerar" e checklists. */
.qim-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--qim-space-4);
}
.qim-steps li { display: flex; gap: 14px; align-items: flex-start; }
.qim-steps__num {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--qim-clarity);
    color: var(--qim-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-sm);
    font-weight: var(--qim-weight-semibold);
}
.qim-steps__title {
    display: block;
    font-size: var(--qim-text-md);
    font-weight: var(--qim-weight-bold);
    color: var(--qim-text-strong);
    letter-spacing: var(--qim-tracking-tight);
    margin-bottom: 4px;
}
.qim-steps p { margin: 0; font-size: var(--qim-text-sm); line-height: var(--qim-leading-relaxed); color: var(--qim-text-body); }

/* Régua fina que avança — eco do gesto do símbolo. */
.qim-rule { height: 1px; background: var(--qim-ink-20); border: 0; margin: var(--qim-space-6) 0; }

/* --------------------------------------------------------- formulários ---- */

.qim-field { display: flex; flex-direction: column; gap: 6px; }
.qim-field__label { font-size: var(--qim-text-sm); font-weight: var(--qim-weight-semibold); color: var(--qim-text-strong); }
.qim-field__req { color: var(--qim-signal); }
.qim-field__hint { font-size: var(--qim-text-xs); color: var(--qim-text-muted); line-height: var(--qim-leading-normal); }
.qim-field__error { font-size: var(--qim-text-xs); color: var(--qim-signal); }

.qim-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    background: var(--qim-white);
    border: 1.5px solid var(--qim-border-input);
    border-radius: var(--qim-radius-input);
    font-family: var(--qim-font-sans);
    font-size: var(--qim-text-md);
    color: var(--qim-text-strong);
    transition: var(--qim-transition-ui);
}
.qim-input:focus {
    outline: none;
    border-color: var(--qim-border-input-focus);
    box-shadow: var(--qim-focus-ring);
}
.qim-input[disabled] { background: var(--qim-surface-sunken); }
.qim-input.is-invalid { border-color: var(--qim-signal); }
textarea.qim-input { height: auto; padding: 12px 14px; line-height: var(--qim-leading-relaxed); }
select.qim-input { appearance: none; background-image: none; }

/* --------------------------------------------------- header e footer ------ */

.qim-header {
    background: var(--qim-surface-inverse);
    font-family: var(--qim-font-sans);
}
.qim-header--light { background: var(--qim-white); border-bottom: 1px solid var(--qim-border-subtle); }
.qim-header__inner {
    max-width: var(--qim-content-max);
    margin: 0 auto;
    padding: 0 var(--qim-gutter);
    height: 76px;
    display: flex;
    align-items: center;
    gap: var(--qim-space-6);
}
.qim-header__logo { height: 30px; width: auto; display: block; }
.qim-header__symbol { display: none; }
.qim-header__brand { display: inline-flex; align-items: center; }
.qim-nav { display: flex; align-items: center; gap: var(--qim-space-5); margin-left: var(--qim-space-4); }
.qim-nav a {
    font-size: var(--qim-text-sm);
    font-weight: var(--qim-weight-medium);
    color: var(--qim-white);
    opacity: .72;
    padding: 4px 0;
    transition: var(--qim-transition-ui);
}
.qim-nav a:hover { opacity: 1; color: var(--qim-white); box-shadow: inset 0 -3px 0 var(--qim-decision); }
.qim-nav a.is-active { opacity: 1; font-weight: var(--qim-weight-bold); box-shadow: inset 0 -3px 0 var(--qim-clarity); }
.qim-header--light .qim-nav a { color: var(--qim-text-strong); }
.qim-header--light .qim-nav a:hover { color: var(--qim-text-strong); }
.qim-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Mobile: a navegação NÃO some — vira uma faixa rolável abaixo do lockup.
   Esconder o menu atrás de nada deixava o visitante de celular (que é como o
   público real acessa) sem caminho para as seções. */
/* Botão do menu: invisível no desktop, invisível também sem JS (só aparece
   quando o script marca o header). */
.qim-header__toggle { display: none; }

.qim-header__burger,
.qim-header__burger::before,
.qim-header__burger::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--qim-duration-fast) var(--qim-ease),
                opacity var(--qim-duration-fast) var(--qim-ease);
}
.qim-header__burger { position: relative; }
.qim-header__burger::before,
.qim-header__burger::after { content: ""; position: absolute; left: 0; }
.qim-header__burger::before { top: -6px; }
.qim-header__burger::after { top: 6px; }

/* Aberto: as três barras viram um X. */
.qim-header[data-nav-open="true"] .qim-header__burger { background: transparent; }
.qim-header[data-nav-open="true"] .qim-header__burger::before { transform: translateY(6px) rotate(45deg); }
.qim-header[data-nav-open="true"] .qim-header__burger::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 991.98px) {
    .qim-header__inner {
        height: auto;
        flex-wrap: wrap;
        gap: var(--qim-space-3);
        padding-top: var(--qim-space-4);
        padding-bottom: var(--qim-space-3);
    }
    /* O lockup a 30px mede 193px (proporção 900×140). Somado ao CTA e ao botão
       do menu, estourava a linha em 390px. A 24px mede 154px e os três cabem. */
    .qim-header__logo { height: 24px; }

    .qim-header__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: 2;
        width: 40px;
        height: 40px;
        flex: none;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: var(--qim-radius-button);
        background: transparent;
        color: var(--qim-white);
        cursor: pointer;
    }
    .qim-header--light .qim-header__toggle { border-color: var(--qim-border-subtle); color: var(--qim-text-strong); }
    .qim-header__actions { order: 3; margin-left: 0; }

    /* Navegação empilhada, ocupando a largura toda. Nada de rolagem lateral e
       nada de item cortado: cada destino aparece inteiro, em sua própria linha. */
    .qim-nav {
        order: 4;
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: var(--qim-space-2);
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .qim-nav a {
        padding: var(--qim-space-3) 0;
        font-size: var(--qim-text-md);
        opacity: 1;
    }
    /* O sublinhado de 3px é gesto de barra horizontal; empilhado ele vira
       divisória, que é o equivalente correto na vertical. */
    .qim-nav a:hover,
    .qim-nav a.is-active { box-shadow: none; }
    .qim-nav a.is-active { color: var(--qim-clarity); font-weight: var(--qim-weight-bold); }
    .qim-nav a + a { border-top: 1px solid rgba(255, 255, 255, .08); }

    /* Colapso só quando o JS está ativo — sem ele a navegação fica visível. */
    .qim-header[data-js="on"] .qim-nav { display: none; }
    .qim-header[data-js="on"][data-nav-open="true"] .qim-nav { display: flex; }

    /* Marca reduzida ao símbolo: libera ~128px para o menu e o CTA caberem
       na mesma linha. O lockup volta a partir de 992px. */
    .qim-header__logo { display: none; }
    .qim-header__symbol { display: block; height: 30px; width: auto; }
    .qim-header__brand { flex: none; }
}

/* No celular o cabeçalho estava gastando duas faixas antes de qualquer
   conteúdo: símbolo + hambúrguer numa linha, busca + conta + CTA na seguinte, e
   ainda a barra de seções embaixo. Somado ao breadcrumb de duas linhas, o leitor
   de 390px só alcançava o texto do artigo depois de rolar uma tela e meia — e é
   assim que o público real acessa (§8.5, meta de Core Web Vitals em 4G móvel).
   As ações sobem para a primeira linha e o conjunto encolhe. */
@media (max-width: 575.98px) {
    .qim-header__inner {
        flex-wrap: nowrap;
        padding-top: var(--qim-space-3);
        padding-bottom: var(--qim-space-3);
        gap: var(--qim-space-2);
    }
    .qim-header__actions { order: 2; margin-left: auto; gap: 6px; }
    .qim-header__toggle { order: 3; width: 38px; height: 38px; }
    .qim-nav { order: 4; }
    /* O rótulo "Iniciar sesión" some e fica só o ícone; o alvo continua sendo o
       mesmo link e o nome acessível vem do aria-label. */
    .qim-header__account span { display: none; }
    .qim-header__account { padding: 0; gap: 0; }
    .qim-header__symbol { height: 26px; }
}
/* No desktop o ícone é redundante — o rótulo já diz o que é. */
@media (min-width: 576px) { .qim-header__account-icon { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .qim-header__burger,
    .qim-header__burger::before,
    .qim-header__burger::after { transition: none; }
}

.qim .qim-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--qim-radius-button);
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--qim-white);
    transition: var(--qim-transition-ui);
}
.qim .qim-header__icon:hover { background: rgba(255, 255, 255, .1); color: var(--qim-white); }

/* Sino de notificações: o ponto Señal indica não lidas por FORMA além de cor. */
.qim-header__icon { position: relative; }
.qim-header__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--qim-signal);
    color: var(--qim-ink);
    font-family: var(--qim-font-data);
    font-size: 10px;
    font-weight: var(--qim-weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qim-header__xp {
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-data);
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}
.qim-header__xp b { color: var(--qim-clarity); }
@media (max-width: 575.98px) { .qim-header__xp { display: none; } }

/* Menu de conta: <details> nativo — abre por teclado e sem JS. */
.qim-account { position: relative; }
.qim-account > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--qim-radius-button);
    font-size: var(--qim-text-sm);
    font-weight: var(--qim-weight-medium);
    color: var(--qim-white);
    white-space: nowrap;
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qim-account > summary::-webkit-details-marker { display: none; }
.qim-account > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    flex: none;
}
.qim-account[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.qim-account__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    min-width: 200px;
    padding: var(--qim-space-3);
    border-radius: var(--qim-radius-card);
    border: 1px solid var(--qim-border-subtle);
    background: var(--qim-surface-card);
    box-shadow: var(--qim-shadow-lifted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.qim-account__menu a {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: var(--qim-text-sm);
    color: var(--qim-text-strong);
}
.qim-account__menu a:hover { background: var(--qim-ink-08); color: var(--qim-text-strong); }
.qim-account__menu hr { border: 0; border-top: 1px solid var(--qim-divider); margin: var(--qim-space-2) 0; }

.qim .qim-header__account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--qim-text-sm);
    font-weight: var(--qim-weight-medium);
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}
.qim .qim-header__account:hover { color: var(--qim-white); }
.qim-header__account img { border-radius: var(--qim-radius-pill); }
@media (max-width: 575.98px) { .qim-header__account span { display: none; } }
.qim .qim-header--light .qim-header__icon { border-color: var(--qim-border-subtle); color: var(--qim-text-strong); }

/* Segunda barra: seções editoriais. Grafito sobre Tinta — superfície escura
   elevada, o mesmo par que o design system usa em card sobre fundo inverso. */
.qim-subnav {
    background: var(--qim-surface-inverse-raised);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.qim-subnav__inner {
    max-width: var(--qim-content-max);
    margin: 0 auto;
    padding: 0 var(--qim-gutter);
    display: flex;
    align-items: center;
    gap: var(--qim-space-5);
    height: 46px;
    overflow-x: auto;
    scrollbar-width: none;
}
.qim-subnav__inner::-webkit-scrollbar { display: none; }
.qim-subnav a {
    white-space: nowrap;
    font-size: var(--qim-text-sm);
    font-weight: var(--qim-weight-medium);
    color: rgba(255, 255, 255, .72);
    padding: 3px 0;
    transition: var(--qim-transition-ui);
}
.qim-subnav a:hover { color: var(--qim-white); box-shadow: inset 0 -3px 0 var(--qim-decision); }
.qim-subnav a.is-active { color: var(--qim-white); font-weight: var(--qim-weight-bold); box-shadow: inset 0 -3px 0 var(--qim-clarity); }

.qim-footer {
    background: var(--qim-surface-inverse);
    color: var(--qim-text-on-inverse);
    padding: var(--qim-space-8) 0 var(--qim-space-6);
    font-family: var(--qim-font-sans);
}
.qim-footer a { color: rgba(255, 255, 255, .72); font-size: var(--qim-text-sm); }
.qim-footer a:hover { color: var(--qim-white); }
.qim-footer__legal {
    margin-top: var(--qim-space-6);
    padding-top: var(--qim-space-5);
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: var(--qim-text-xs);
    line-height: var(--qim-leading-relaxed);
    color: rgba(255, 255, 255, .72);
}

/* ---------------------------------------- marcação Claridad no título ----- */
/* A assinatura tipográfica do sistema: uma faixa Claridad translúcida por trás
   de parte da manchete, como marca-texto. É o mesmo gesto do sublinhado
   editorial que cresce no hover — aqui aplicado à palavra que carrega a ideia.
   Usa box-shadow inset (não background) para não engordar a caixa do texto. */
/* Marca-texto de verdade: a faixa fica ATRÁS das letras, cobrindo do meio da
   altura-x até a base. A primeira versão usava `inset 0 -0.32em` — num display
   de 4rem a sombra caía abaixo dos glifos e lia como uma barra solta embaixo da
   frase, não como marcação. `box-decoration-break: clone` mantém a faixa quando
   a manchete quebra em duas linhas. */
/* A faixa é um pseudo-elemento posicionado, não `box-shadow: inset`.
   Motivo: a Manrope tem bastante folga abaixo do baseline no em-box, então a
   sombra inset — que pinta a partir da base do box inline — caía inteira sob os
   glifos e lia como uma barra solta, por mais que se aumentasse a altura.
   Aqui o retângulo é ancorado ao texto: sobe 0.12em acima do baseline e tem
   0.36em de altura, cobrindo a base das letras e deixando o topo limpo.
   `isolation` no pai prende o z-index negativo, para a faixa ficar atrás do
   texto sem cair atrás do fundo da seção. */
/* A faixa acompanha o texto linha a linha (`box-decoration-break: clone`).
   Duas tentativas anteriores falharam e vale registrar por quê:
   · `box-shadow: inset` caía abaixo dos glifos — a Manrope tem folga grande sob
     o baseline no em-box, então a sombra pintava o descendente, não as letras;
   · um `::before` absoluto sobre `display:inline-block` acertava o desktop mas
     no celular a caixa assumia a largura disponível e a faixa passava muito além
     da palavra, além de deixar o ponto final órfão numa linha só.
   Com `background` + clone a marcação cobre exatamente o texto, em qualquer
   quebra de linha. */
/* Segunda metade da manchete: bloco próprio em Decisión, como no modelo de
   referência (`.hero-copy h1 span { display:block; color: var(--decision) }`).
   Decisión sobre Tinta dá 4,72:1 — passa AA inclusive em texto normal.
   Preferido à marcação de texto no hero: não depende de métrica de fonte, não
   deixa órfão e não vira retângulo quando a linha é longa. */
.qim-display__accent {
    display: block;
    color: var(--qim-decision);
}

.qim-mark {
    background: rgba(216, 243, 106, .22);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0.02em 0.08em;
    border-radius: 3px;
}
/* Sobre marfil/branco o lima translúcido some no fundo: aqui entra com corpo. */
.qim-band--white .qim-mark,
.qim-band--ivory .qim-mark { background: rgba(216, 243, 106, .55); }

/* Display da home: a escala do ui_kit (2.6rem → 4rem), não a do hero genérico.
   Mais contida que --qim-text-hero, que é para peça de campanha. */
.qim-display {
    margin: 0;
    font-family: var(--qim-font-sans);
    font-size: clamp(2.6rem, 4.4vw, 4rem);
    font-weight: var(--qim-weight-black);
    letter-spacing: var(--qim-tracking-tight);
    line-height: var(--qim-leading-tight);
    text-wrap: pretty;
}

/* --------------------------------------------- filtro por categoria ------- */
.qim-chipnav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Zera só o invólucro de quem carrega o estilo num filho (`<a><span class="qim-tag">`).
   `:not(.qim-chip-link)` evita a colisão com o chip que se estiliza sozinho —
   sem isso, `.qim-chipnav a` (0,1,1) vencia `.qim-chip-link` (0,1,0) e os chips
   do hub apareciam como texto solto. */
.qim-chipnav > a:not(.qim-chip-link),
.qim-chipnav > button:not(.qim-chip-link) {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

/* ------------------------------------------------------- card de curso ---- */
.qim-course-card { display: flex; flex-direction: column; }
.qim-course-card__head {
    background: var(--qim-surface-inverse);
    padding: var(--qim-space-5);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qim-course-card__head-top { display: flex; justify-content: space-between; align-items: center; }
.qim-course-card__title {
    margin: 0;
    font-family: var(--qim-font-serif);
    font-size: var(--qim-text-xl);
    font-weight: var(--qim-weight-semibold);
    line-height: var(--qim-leading-snug);
    color: var(--qim-white);
    text-wrap: pretty;
}
.qim-course-card__body {
    padding: var(--qim-space-5);
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.qim-course-card__meta {
    display: flex;
    gap: 16px;
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    color: var(--qim-text-muted);
}

/* --------------------------------------------------- card de ferramenta --- */
.qim-tool-card { display: flex; flex-direction: column; gap: 14px; }
.qim-tool-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--qim-decision-wash);
    color: var(--qim-decision);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.qim-tool-card__title {
    margin: 0;
    font-family: var(--qim-font-sans);
    font-size: var(--qim-text-lg);
    font-weight: var(--qim-weight-bold);
    letter-spacing: var(--qim-tracking-tight);
    color: var(--qim-text-strong);
}
.qim-tool-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

/* ============================================================ hubs ========
   Notícias, guias, ferramentas e cursos compartilham a mesma gramática:
   hero de duas colunas → navegação/rota → conteúdo dinâmico ou estado vazio.
   ========================================================================= */

/* Migalha de pão dos hubs e das páginas legais. */
.qim-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qim-space-2);
    margin: 0 0 var(--qim-space-5);
    padding: 0;
    list-style: none;
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-data);
    color: rgba(255, 255, 255, .6);
}
.qim-crumbs li + li::before { content: "·"; margin-right: var(--qim-space-2); }
.qim-crumbs a { color: rgba(255, 255, 255, .72); }
.qim-crumbs a:hover { color: var(--qim-white); }
.qim-crumbs--ink { color: var(--qim-text-muted); }
.qim-crumbs--ink a { color: var(--qim-text-muted); }
.qim-crumbs--ink a:hover { color: var(--qim-text-link-hover); }

/* Busca do hub. */
.qim-search { display: flex; gap: var(--qim-space-3); flex-wrap: wrap; max-width: 520px; }
.qim-search .qim-input { flex: 1 1 240px; }

/* Chips de tema. O estado ativo não depende só de cor: muda o peso e ganha
   contorno cheio — requisito de acessibilidade do briefing. */
.qim .qim-chip-link, .qim-chip-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--qim-radius-pill);
    border: 1px solid var(--qim-border-subtle);
    background: var(--qim-surface-card);
    color: var(--qim-text-strong);
    font-size: var(--qim-text-sm);
    font-weight: var(--qim-weight-medium);
    transition: var(--qim-transition-ui);
}
.qim .qim-chip-link:hover, .qim-chip-link:hover { border-color: var(--qim-ink); color: var(--qim-text-strong); }
.qim .qim-chip-link.is-active, .qim-chip-link.is-active {
    background: var(--qim-ink);
    border-color: var(--qim-ink);
    color: var(--qim-white);
    font-weight: var(--qim-weight-bold);
}
.qim-chip-link.is-active::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--qim-clarity);
}

/* Cartão de série editorial: selo colorido + explicação curta.
   Virou <a>: as séries eram quatro caixas de texto que não levavam a lugar
   nenhum. Agora cada uma filtra o hub, então precisa de hover, foco e estado. */
.qim-serie-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--qim-space-4);
}
@media (max-width: 991.98px) { .qim-serie-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .qim-serie-cards { grid-template-columns: minmax(0, 1fr); } }

.qim-serie-card {
    display: flex;
    flex-direction: column;
    gap: var(--qim-space-3);
    padding: var(--qim-space-5);
    border-radius: var(--qim-radius-card);
    border: 1px solid var(--qim-border-subtle);
    background: var(--qim-surface-card);
    align-items: flex-start;
    transition: var(--qim-transition-ui);
}
.qim-serie-card p {
    margin: 0;
    font-size: var(--qim-text-sm);
    line-height: var(--qim-leading-relaxed);
    color: var(--qim-text-body);
}
a.qim-serie-card { text-decoration: none; }
a.qim-serie-card:hover { border-color: var(--qim-ink); transform: translateY(-2px); }
a.qim-serie-card.is-active { border-color: var(--qim-ink); box-shadow: inset 0 0 0 1px var(--qim-ink); }

/* Estado vazio intencional: explica o método, não pede desculpa. */
.qim-empty {
    border: 1px solid var(--qim-border-subtle);
    border-radius: var(--qim-radius-card);
    background: var(--qim-surface-card);
    padding: var(--qim-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--qim-space-4);
    align-items: flex-start;
}
.qim-empty p { margin: 0; max-width: 60ch; line-height: var(--qim-leading-relaxed); color: var(--qim-text-body); }

/* Rota numerada usada em guias, ferramentas e cursos. */
.qim-route-cards { display: grid; gap: var(--qim-space-5); }
.qim-route-card {
    position: relative;
    padding: var(--qim-space-5);
    padding-top: var(--qim-space-6);
    border-radius: var(--qim-radius-card);
    border: 1px solid var(--qim-border-subtle);
    background: var(--qim-surface-card);
}
.qim-route-card__num {
    position: absolute;
    top: var(--qim-space-4);
    left: var(--qim-space-5);
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    font-weight: var(--qim-weight-semibold);
    letter-spacing: var(--qim-tracking-wide);
    color: var(--qim-decision);
}
.qim-route-card h3 {
    margin: var(--qim-space-4) 0 var(--qim-space-2);
    font-size: var(--qim-text-lg);
    font-weight: var(--qim-weight-bold);
    letter-spacing: var(--qim-tracking-tight);
    color: var(--qim-text-strong);
}
.qim-route-card p {
    margin: 0;
    font-size: var(--qim-text-sm);
    line-height: var(--qim-leading-relaxed);
    color: var(--qim-text-body);
}
/* A régua superior marca o avanço da rota: verde, lima, verde, coral. */
.qim-route-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--qim-space-5);
    right: var(--qim-space-5);
    height: 3px;
    border-radius: 0 0 2px 2px;
    background: var(--qim-decision);
}
.qim-route-card:nth-child(2)::before { background: var(--qim-clarity); }
.qim-route-card:nth-child(4)::before { background: var(--qim-signal); }
/* Os quatro passos da rota viraram links para o cluster correspondente: antes
   descreviam o caminho e não levavam a nenhuma guia. */
a.qim-route-card { display: block; text-decoration: none; transition: var(--qim-transition-ui); }
a.qim-route-card:hover { border-color: var(--qim-ink); transform: translateY(-2px); }

/* Comparação Qué hacemos / Qué no hacemos. */
.qim-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--qim-space-5); }
@media (max-width: 767.98px) { .qim-compare { grid-template-columns: minmax(0, 1fr); } }
.qim-compare__col {
    padding: var(--qim-space-5);
    border-radius: var(--qim-radius-card);
    border: 1px solid var(--qim-border-subtle);
    background: var(--qim-surface-card);
}
.qim-compare__col ul { margin: var(--qim-space-4) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--qim-space-3); }
.qim-compare__col li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--qim-text-sm);
    line-height: var(--qim-leading-relaxed);
    color: var(--qim-text-body);
}
.qim-compare__col li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 2px;
    background: var(--qim-decision);
}
.qim-compare__col--no li::before { background: var(--qim-signal); }

/* Índice local dos documentos legais. */
.qim-toc {
    border-left: 2px solid var(--qim-border-subtle);
    padding-left: var(--qim-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--qim-space-2);
    position: sticky;
    top: var(--qim-space-5);
}
.qim-toc a { font-size: var(--qim-text-sm); color: var(--qim-text-body); line-height: var(--qim-leading-normal); }
.qim-toc a:hover { color: var(--qim-text-link-hover); }
@media (max-width: 991.98px) { .qim-toc { position: static; } }

.qim-legal-split {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--qim-space-8);
    align-items: start;
}
@media (max-width: 991.98px) { .qim-legal-split { grid-template-columns: minmax(0, 1fr); gap: var(--qim-space-6); } }

/* =========================================================== home =========
   Componentes da composição da home (modelo em qim-home-reference/index.html).
   Tudo em bloco chapado: nenhum gradiente, nenhuma sombra colorida.
   ========================================================================= */

/* Faixa da ruta: os três passos da marca, logo abaixo da dobra. Fundo Grafito
   para separar do hero Tinta sem introduzir um terceiro fundo na página. */
.qim-route {
    background: var(--qim-surface-inverse-raised);
    color: var(--qim-text-on-inverse);
    padding: var(--qim-space-5) 0;
}
.qim-route__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--qim-space-6);
}
.qim-route__step { display: flex; gap: var(--qim-space-4); align-items: flex-start; }
.qim-route__num {
    flex: none;
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-sm);
    font-weight: var(--qim-weight-semibold);
    color: var(--qim-clarity);
    padding-top: 2px;
}
.qim-route__step strong {
    display: block;
    font-size: var(--qim-text-md);
    font-weight: var(--qim-weight-bold);
    letter-spacing: var(--qim-tracking-tight);
    color: var(--qim-white);
}
.qim-route__step small {
    display: block;
    margin-top: 2px;
    font-size: var(--qim-text-sm);
    color: rgba(255, 255, 255, .72);
}
@media (max-width: 767.98px) {
    .qim-route__grid { grid-template-columns: minmax(0, 1fr); gap: var(--qim-space-4); }
}

/* Cabeçalho de seção: título à esquerda, link à direita. */
.qim-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--qim-space-5);
    flex-wrap: wrap;
    margin-bottom: var(--qim-space-7);
}

/* Grade editorial: destaque grande + pilha de dois. */
.qim-news-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--qim-space-5);
    align-items: stretch;
}
@media (max-width: 991.98px) { .qim-news-grid { grid-template-columns: minmax(0, 1fr); } }

/* Destaque sozinho: ocupa a linha inteira e vira composição deitada — capa à
   esquerda, texto à direita. Na grade de duas colunas ele ficaria com 60% da
   largura e um vão branco do lado, que é como a página apareceu no dia em que
   havia exatamente uma notícia publicada. */
.qim-news-grid--solo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
    .qim-news-grid--solo .qim-feature--media { flex-direction: row; align-items: stretch; }
    .qim-news-grid--solo .qim-feature--media > a { width: 46%; flex: none; display: block; }
    .qim-news-grid--solo .qim-feature__media { height: 100%; aspect-ratio: auto; object-fit: cover; }
    .qim-news-grid--solo .qim-feature__body { justify-content: center; }
}
.qim-news-stack { display: flex; flex-direction: column; gap: var(--qim-space-5); }

.qim-feature {
    background: var(--qim-surface-inverse);
    color: var(--qim-text-on-inverse);
    border-radius: var(--qim-radius-card);
    padding: var(--qim-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--qim-space-4);
}
.qim-feature__title {
    margin: 0;
    font-family: var(--qim-font-serif);
    font-size: var(--qim-text-2xl);
    font-weight: var(--qim-weight-semibold);
    line-height: var(--qim-leading-snug);
    color: var(--qim-white);
    text-wrap: pretty;
}
.qim-feature p { margin: 0; color: rgba(255, 255, 255, .82); line-height: var(--qim-leading-relaxed); }
.qim-feature .qim-btn--editorial { color: var(--qim-white); margin-top: auto; align-self: flex-start; }
.qim .qim-feature .qim-btn--editorial { color: var(--qim-white); }
.qim .qim-feature .qim-btn--editorial:hover { color: var(--qim-white); }

/* Destaque com capa. O destaque era o único cartão da seção sem imagem, ao lado
   de uma grade que tinha — três gramáticas visuais para a mesma informação. */
.qim-feature--media { padding: 0; overflow: hidden; gap: 0; }
.qim-feature__media { display: block; width: 100%; height: auto; aspect-ratio: var(--qim-ratio-media); object-fit: cover; }
.qim-feature__body {
    display: flex;
    flex-direction: column;
    gap: var(--qim-space-4);
    padding: var(--qim-space-6);
    flex: 1;
}
.qim-feature__meta {
    display: flex;
    gap: 14px;
    align-items: center;
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-data);
    color: rgba(255, 255, 255, .62);
}
/* Sobre Tinta, a cápsula de categoria em contorno sumiria: a borda é branca. */
.qim-feature .qim-tag--outline { color: var(--qim-white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }

/* Ecossistema: as quatro frentes, numeradas porque são uma sequência real —
   entender, fundamentar, aprender, calcular. */
.qim-product-card {
    display: flex;
    flex-direction: column;
    gap: var(--qim-space-3);
    background: var(--qim-surface-card);
    border: 1px solid var(--qim-border-subtle);
    border-radius: var(--qim-radius-card);
    padding: var(--qim-space-5);
    box-shadow: var(--qim-shadow-card);
    transition: box-shadow var(--qim-duration-base) var(--qim-ease),
                transform var(--qim-duration-base) var(--qim-ease);
}
.qim-product-card:hover { box-shadow: var(--qim-shadow-lifted); transform: translateY(-2px); }
.qim-product-card__index {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qim-space-3);
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-wide);
    text-transform: uppercase;
    color: var(--qim-text-muted);
}
/* A lasca diagonal do símbolo, em miniatura. */
.qim-product-card__mark {
    width: 26px;
    height: 10px;
    background: var(--qim-decision);
    clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%);
}
.qim-product-card:nth-child(2) .qim-product-card__mark { background: var(--qim-clarity); }
.qim-product-card:nth-child(3) .qim-product-card__mark { background: var(--qim-ink); }
.qim-product-card:nth-child(4) .qim-product-card__mark { background: var(--qim-signal); }
.qim-product-card h3 {
    margin: 0;
    font-size: var(--qim-text-lg);
    font-weight: var(--qim-weight-bold);
    letter-spacing: var(--qim-tracking-tight);
    color: var(--qim-text-strong);
}
.qim-product-card p {
    margin: 0;
    font-size: var(--qim-text-sm);
    line-height: var(--qim-leading-relaxed);
    color: var(--qim-text-body);
}
.qim-product-card .qim-btn { margin-top: auto; align-self: flex-start; }

/* Destaque de curso: texto à esquerda, mapa em bloco Tinta à direita. */
.qim-course-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--qim-space-8);
    align-items: center;
}
@media (max-width: 991.98px) { .qim-course-split { grid-template-columns: minmax(0, 1fr); gap: var(--qim-space-6); } }

.qim-course-points {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qim-space-6);
    margin: var(--qim-space-6) 0;
    padding: var(--qim-space-5) 0;
    border-top: 1px solid var(--qim-border-subtle);
    border-bottom: 1px solid var(--qim-border-subtle);
}
.qim-course-points span {
    display: block;
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-wide);
    text-transform: uppercase;
    color: var(--qim-text-muted);
    margin-bottom: 4px;
}
.qim-course-points strong {
    font-size: var(--qim-text-md);
    font-weight: var(--qim-weight-bold);
    color: var(--qim-text-strong);
    letter-spacing: var(--qim-tracking-tight);
}

.qim-map {
    background: var(--qim-surface-inverse);
    color: var(--qim-text-on-inverse);
    border-radius: var(--qim-radius-card);
    padding: var(--qim-space-6);
}
.qim-map__label {
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-wide);
    text-transform: uppercase;
    color: var(--qim-clarity);
}
.qim-map__title {
    margin: var(--qim-space-3) 0 var(--qim-space-6);
    font-family: var(--qim-font-serif);
    font-size: var(--qim-text-xl);
    font-weight: var(--qim-weight-semibold);
    line-height: var(--qim-leading-snug);
    color: var(--qim-white);
}
.qim-map__list { display: flex; flex-direction: column; gap: var(--qim-space-4); }
.qim-map__item { display: flex; gap: var(--qim-space-4); align-items: flex-start; }
.qim-map__dot {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: var(--qim-clarity);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    font-weight: var(--qim-weight-semibold);
}
.qim-map__item strong { display: block; color: var(--qim-white); font-size: var(--qim-text-md); }
.qim-map__item small { display: block; margin-top: 2px; font-size: var(--qim-text-sm); color: rgba(255, 255, 255, .72); }

/* Método editorial: princípios numerados — a numeração é sequência real de
   verificação, não enfeite. */
.qim-principles { display: grid; gap: var(--qim-space-5); }
.qim-principle { display: flex; gap: var(--qim-space-4); align-items: flex-start; }
.qim-principle__num {
    flex: none;
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-sm);
    font-weight: var(--qim-weight-semibold);
    color: var(--qim-decision);
    padding-top: 3px;
}
.qim-principle h3 {
    margin: 0 0 4px;
    font-size: var(--qim-text-md);
    font-weight: var(--qim-weight-bold);
    letter-spacing: var(--qim-tracking-tight);
    color: var(--qim-text-strong);
}
.qim-principle p {
    margin: 0;
    font-size: var(--qim-text-sm);
    line-height: var(--qim-leading-relaxed);
    color: var(--qim-text-body);
}

/* Legenda da ilustração do hero. */
.qim-hero-caption {
    margin: var(--qim-space-3) 0 0;
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-data);
    color: rgba(255, 255, 255, .6);
}

/* Leitura Entiende · Compara · Decide sob os CTAs do hero. */
.qim-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qim-space-5);
    margin-top: var(--qim-space-6);
    padding-top: var(--qim-space-5);
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

/* ------------------------------------------- motivo geométrico da marca --- */
/* "La Q que avanza": o anel Tinta interrompido e a faixa Decisión que atravessa
   a abertura. No board de direção visual esse gesto reaparece como blocos
   chapados na diagonal — notícia, curso e social usam a mesma composição.
   Tudo é recorte geométrico: nenhum gradiente, nenhuma sombra, nenhum blur. */

.qim-motif {
    position: relative;
    overflow: hidden;
    border-radius: var(--qim-radius-card);
    background: var(--qim-decision);
    min-height: 260px;
}
/* A faixa Claridad que atravessa — paralelogramo de topos retos e laterais
   diagonais, separado do verde por um corredor de espaço negativo. */
.qim-motif::before,
.qim-motif::after {
    content: "";
    position: absolute;
    inset: -10% -30%;
    pointer-events: none;
}
.qim-motif::before {
    background: var(--qim-ink);
    clip-path: polygon(58% 0, 100% 0, 100% 100%, 30% 100%);
}
.qim-motif::after {
    background: var(--qim-clarity);
    clip-path: polygon(40% 0, 52% 0, 24% 100%, 12% 100%);
}
.qim-motif--ink { background: var(--qim-ink); }
.qim-motif--ink::before { background: var(--qim-decision); }
.qim-motif--ivory { background: var(--qim-surface-page); }
.qim-motif--ivory::before { background: var(--qim-decision); }

/* Acento Señal — o coral da paleta. Cor de SINAL: usada em faixa fina, etiqueta
   e marcação pontual, nunca como fundo dominante (teto de 3% da peça). */
.qim-motif__signal {
    position: absolute;
    right: 12%;
    bottom: 0;
    width: 14%;
    height: 46%;
    background: var(--qim-signal);
    clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%);
}

/* Régua Señal: separa seção sem pedir atenção como um bloco inteiro faria. */
.qim-accent-rule {
    width: 56px;
    height: 4px;
    border: 0;
    margin: 0 0 var(--qim-space-4);
    background: var(--qim-signal);
    border-radius: 2px;
}
.qim-accent-rule--clarity { background: var(--qim-clarity); }
.qim-accent-rule--decision { background: var(--qim-decision); }

/* Etiqueta de sinal — contraponto, alerta, "en preparación". */
.qim-tag--accent { background: var(--qim-signal); color: var(--qim-ink); }

/* Numeração de passo em Señal, para quando a sequência é o contraponto
   (o passo que a pessoa costuma pular). */
.qim-steps__num--signal { background: var(--qim-signal); color: var(--qim-ink); }

/* Hero em duas colunas: mensagem à esquerda, motivo geométrico à direita —
   a composição da aplicação editorial do board. */
.qim-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--qim-space-8);
    align-items: center;
}
@media (max-width: 991.98px) {
    .qim-hero-split { grid-template-columns: minmax(0, 1fr); gap: var(--qim-space-6); }
    .qim-motif { min-height: 180px; }
}

/* ------------------------------------------------- página de notícia ------ */
/* Layout da peça-símbolo do sistema: coluna editorial na medida de leitura +
   coluna de apoio sticky. Ver docs/QIM-MIGRACAO-IDENTIDADE.md §3.1. */

.qim-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--qim-space-8);
    align-items: start;
}
@media (max-width: 991.98px) {
    .qim-article { grid-template-columns: minmax(0, 1fr); gap: var(--qim-space-7); }
}

/* Nada flutuante além do header — a coluna de apoio usa sticky. */
.qim-article__aside { position: sticky; top: var(--qim-space-5); }
.qim-aside-stack { display: flex; flex-direction: column; gap: var(--qim-space-5); }

/* No mobile a coluna vira fluxo: sticky numa tela de 390px prenderia meia
   janela. Índice e progresso saem — não há o que ancorar numa coluna única —
   e a captura fica só na versão que já existe dentro do corpo do artigo. */
@media (max-width: 991.98px) {
    .qim-article__aside { position: static; }
    .qim-article__aside .qim-toc,
    .qim-article__aside .qim-progress,
    .qim-article__aside .qim-newsletter { display: none; }
}
/* E no desktop a captura do corpo some, porque a da coluna já está na tela. */
@media (min-width: 992px) { .qim-article__cta-flow { display: none; } }

/* Progresso de leitura. Régua fina em Decisión no topo da coluna, não uma barra
   flutuante sobre o texto. O acervo tem artigos de 9 a 17 minutos e a página
   não dava nenhum sinal de onde o leitor estava. */
.qim-progress {
    height: 3px;
    border-radius: 999px;
    background: var(--qim-ink-08);
    overflow: hidden;
}
.qim-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--qim-decision);
    transition: width var(--qim-duration-fast) linear;
}

/* Índice. Preenchido por assets/js/qim-article.js a partir dos H2 do corpo;
   fica `hidden` até haver pelo menos três seções. */
.qim-toc {
    border-left: 1px solid var(--qim-border-subtle);
    padding-left: var(--qim-space-4);
}
.qim-toc__list {
    margin: var(--qim-space-3) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--qim-space-2);
    counter-reset: qim-toc;
}
.qim-toc__list a {
    display: block;
    font-size: var(--qim-text-sm);
    line-height: var(--qim-leading-normal);
    color: var(--qim-text-body);
    text-decoration: none;
    padding: 2px 0;
    border-left: 2px solid transparent;
    padding-left: var(--qim-space-3);
    margin-left: calc(-1 * var(--qim-space-4) - 1px);
    transition: var(--qim-transition-ui);
}
.qim-toc__list a:hover { color: var(--qim-text-strong); }
/* A seção corrente não se distingue só por cor: ganha peso e uma marca de
   régua em Decisión — mesma regra de acessibilidade dos chips de tema. */
.qim-toc__list a.is-current {
    color: var(--qim-text-strong);
    font-weight: var(--qim-weight-bold);
    border-left-color: var(--qim-decision);
}

/* Cartão de apoio (o pilar do cluster). */
.qim-aside-card { display: flex; flex-direction: column; gap: var(--qim-space-3); }
.qim-aside-card__title {
    margin: 0;
    font-family: var(--qim-font-serif);
    font-weight: var(--qim-weight-semibold);
    font-size: var(--qim-text-lg);
    line-height: var(--qim-leading-snug);
}
.qim-aside-card__text {
    margin: 0;
    font-size: var(--qim-text-sm);
    line-height: var(--qim-leading-relaxed);
    color: var(--qim-text-body);
}
/* Na coluna de 320px a captura respira menos: o formulário empilha sempre. */
.qim-article__aside .qim-newsletter { padding: var(--qim-space-5); }
.qim-article__aside .qim-newsletter__form { flex-direction: column; align-items: stretch; }
.qim-article__aside .qim-newsletter__title { font-size: var(--qim-text-xl); }

.qim-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qim-space-2);
    margin: 0 0 var(--qim-space-5);
    padding: 0;
    list-style: none;
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-data);
    color: var(--qim-text-muted);
}
.qim-breadcrumb li + li::before { content: "·"; margin-right: var(--qim-space-2); }
.qim-breadcrumb a { color: var(--qim-text-muted); }
.qim-breadcrumb a:hover { color: var(--qim-text-link-hover); }

.qim-article__header { margin-bottom: var(--qim-space-6); }
.qim-article__title {
    margin: 0 0 var(--qim-space-4);
    font-family: var(--qim-font-serif);
    font-weight: var(--qim-weight-semibold);
    font-size: var(--qim-text-2xl);
    line-height: var(--qim-leading-snug);
    letter-spacing: var(--qim-tracking-normal);
    color: var(--qim-text-strong);
    text-wrap: pretty;
}
@media (min-width: 992px) { .qim-article__title { font-size: var(--qim-text-3xl); } }

.qim-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qim-space-4);
    padding: var(--qim-space-4) 0;
    border-top: 1px solid var(--qim-border-subtle);
    border-bottom: 1px solid var(--qim-border-subtle);
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    letter-spacing: var(--qim-tracking-data);
    color: var(--qim-text-muted);
}
.qim-article__meta a { color: var(--qim-text-body); }
.qim-article__meta img { border-radius: var(--qim-radius-pill); }
.qim-article__meta-end { margin-left: auto; display: flex; gap: var(--qim-space-4); }

/* Legenda de imagem: cápsula chapada, nunca gradiente de proteção. */
.qim-figure { margin: 0 0 var(--qim-space-6); }
.qim-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--qim-radius-media);
}
.qim-figure figcaption {
    margin-top: var(--qim-space-3);
    font-family: var(--qim-font-data);
    font-size: var(--qim-text-xs);
    line-height: var(--qim-leading-normal);
    color: var(--qim-text-muted);
}

.qim-share { display: flex; align-items: center; gap: var(--qim-space-3); flex-wrap: wrap; }
.qim-share__label {
    font-size: var(--qim-text-xs);
    font-weight: var(--qim-weight-bold);
    letter-spacing: var(--qim-tracking-wide);
    text-transform: uppercase;
    color: var(--qim-text-muted);
}
.qim-share a, .qim-share button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--qim-radius-button);
    border: 1px solid var(--qim-border-subtle);
    background: var(--qim-surface-card);
    color: var(--qim-text-strong);
    cursor: pointer;
    transition: var(--qim-transition-ui);
}
.qim-share a:hover, .qim-share button:hover { background: var(--qim-action-secondary-bg-hover); }

/* Os ícones de compartilhar eram cinco quadrados brancos vazios.
   O tema declara `.btn-share a{color:#fff!important}` porque no desenho dele
   cada botão tem o fundo da rede (azul do Facebook, etc.). O QIM troca esse
   fundo pelo cartão branco, mas o `!important` do vendor mantinha a cor do
   ícone em branco — ícone branco sobre fundo branco. `!important` aqui é a
   única forma de vencer `!important` de igual especificidade, e é preferível a
   editar a folha minificada do tema. Mesma razão para o fundo dos dois últimos
   botões (imprimir e lista de leitura), que o tema pinta de #444. */
.qim .qim-share .btn-share a,
.qim .qim-share .btn-share button { color: var(--qim-text-strong) !important; }
.qim .qim-share .btn-share a:hover,
.qim .qim-share .btn-share button:hover { color: var(--qim-text-strong) !important; }
.qim .qim-share .btn-share .btn-print,
.qim .qim-share .btn-share .btn-reading-list {
    background-color: var(--qim-surface-card) !important;
    margin-right: 0 !important;
}
/* O tema separa os botões com margin-right; o gap do flex já faz isso. */
.qim .qim-share .btn-share a { margin-right: 0; }

.qim-taglist { display: flex; flex-wrap: wrap; gap: var(--qim-space-2); margin: 0; padding: 0; list-style: none; }

.qim-authorbox { display: flex; gap: var(--qim-space-4); align-items: flex-start; }
.qim-authorbox img { border-radius: var(--qim-radius-pill); flex: none; }
.qim-authorbox__name {
    display: block;
    font-size: var(--qim-text-md);
    font-weight: var(--qim-weight-bold);
    color: var(--qim-text-strong);
    margin-bottom: var(--qim-space-1);
}

/* Blocos herdados do tema (enquete, quiz, receita, reações, comentários,
   espaços publicitários) continuam com o markup do vendor. Isto normaliza o
   mínimo — forma e tipografia — sem reescrevê-los. */
.qim-legacy-block { font-family: var(--qim-font-sans); margin-top: var(--qim-space-6); }
.qim-legacy-block .btn,
.qim-legacy-block button:not(.qim-btn) { border-radius: var(--qim-radius-button); }
.qim-legacy-block img { border-radius: var(--qim-radius-media); max-width: 100%; height: auto; }

/* ------------------------------------------------------- newsletter ------- */

.qim-newsletter {
    background: var(--qim-surface-inverse);
    color: var(--qim-text-on-inverse);
    border-radius: var(--qim-radius-card);
    padding: var(--qim-space-6);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.qim-newsletter__title {
    margin: 0;
    font-family: var(--qim-font-sans);
    font-size: var(--qim-text-2xl);
    font-weight: var(--qim-weight-black);
    letter-spacing: var(--qim-tracking-tight);
    line-height: var(--qim-leading-tight);
    color: var(--qim-white);
}
.qim-newsletter__promise {
    margin: 0;
    font-size: var(--qim-text-md);
    line-height: var(--qim-leading-normal);
    color: rgba(255, 255, 255, .82);
    max-width: 44ch;
}
.qim-newsletter__form { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.qim-newsletter__form .qim-input { flex: 1 1 220px; }
/* Letra miúda da promessa: frequência, ausência de promessa de rendimento e
   saída — as três coisas que a marca exige declarar antes do botão. */
.qim-newsletter__fine {
    margin: 0;
    font-size: var(--qim-text-xs);
    line-height: var(--qim-leading-normal);
    color: rgba(255, 255, 255, .62);
}
.qim-newsletter__fine a { color: var(--qim-clarity); }
@media (max-width: 575.98px) { .qim-newsletter__form { flex-direction: column; } }

/* --------------------------------- convivência com o shell da Academy ----
   O `academy.css` pinta o <body> de Tinta. Nas telas em que o conteúdo QIM
   assume (catálogo sem destaque), o fundo da página precisa ser o marfil do
   portal — senão as faixas claras viram ilhas soltas num fundo escuro. */
body.ac-body:has(.qim-band--white) { background: var(--qim-surface-page); }
/* O <main> da Academy limita a largura; as faixas QIM sangram até a borda. */
body.ac-body .ac-main:has(> .qim) { padding-left: 0; padding-right: 0; max-width: none; }

/* ------------------------------- convivência com o grid do tema editorial --
   `Ajax/loadMorePosts` devolve cada cartão envolto em `div.col-sm-12.col-md-*`
   do Bootstrap. Dentro de um grid QIM essas colunas somam padding e larguras
   percentuais, e o conteúdo paginado sairia diferente do renderizado no
   servidor. Aqui elas viram células neutras — o cartão manda no tamanho. */
.qim .qim-grid > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

/* Paginação do CodeIgniter dentro do shell QIM. */
.qim-pager .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.qim-pager .page-item .page-link,
.qim-pager .pagination a,
.qim-pager .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--qim-border-subtle);
    border-radius: var(--qim-radius-button);
    background: var(--qim-surface-card);
    color: var(--qim-text-strong);
    font-size: var(--qim-text-sm);
    font-weight: var(--qim-weight-medium);
    text-decoration: none;
}
.qim-pager .page-item.active .page-link,
.qim-pager .pagination .active a,
.qim-pager .pagination .active span {
    background: var(--qim-ink);
    border-color: var(--qim-ink);
    color: var(--qim-white);
    font-weight: var(--qim-weight-bold);
}
.qim-pager .page-item.disabled .page-link { opacity: .45; }

/* Ícone de mídia sobre a capa (vídeo, áudio, galeria) — vem do helper do tema. */
.qim-article-card .media-icon {
    position: absolute;
    left: var(--qim-space-4);
    bottom: var(--qim-space-4);
    z-index: 2;
    color: var(--qim-white);
}
.qim-article-card > a:first-child { position: relative; display: block; }

/* Card de ferramenta no corpo do artigo. Fundo Tinta (não o inline style
   antigo): o recuadro é hidratado na hora de servir, então a classe precisa
   existir no design system e não no HTML gravado no post. */
.qim-tool-bridge {
    margin: var(--qim-space-6) 0 var(--qim-space-3);
}
.qim-prose .qim-tool-bridge { max-width: none; }
.qim-tool-cta {
    background: var(--qim-surface-inverse);
    color: var(--qim-text-on-inverse);
    border-radius: var(--qim-radius-card);
    padding: var(--qim-space-6) var(--qim-space-6);
    margin: 0 0 var(--qim-space-6);
}
.qim-prose .qim-tool-cta { max-width: none; }
.qim-tool-cta__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--qim-space-3);
    font-family: var(--qim-font-sans);
}
.qim-tool-cta__brand {
    font-size: var(--qim-text-sm);
    color: rgba(255, 255, 255, .72);
}
.qim-tool-cta__title {
    font-family: var(--qim-font-sans);
    font-size: var(--qim-text-xl);
    font-weight: var(--qim-weight-bold);
    letter-spacing: -0.02em;
    color: var(--qim-white);
    margin: 0 0 var(--qim-space-2);
}
.qim-prose .qim-tool-cta__title { color: var(--qim-white); }
.qim-tool-cta__lead {
    font-family: var(--qim-font-sans);
    font-size: var(--qim-text-md);
    line-height: 1.65;
    color: rgba(255, 255, 255, .72);
    margin: 0 0 var(--qim-space-5);
}
.qim-prose .qim-tool-cta__lead { color: rgba(255, 255, 255, .72); }