/* O blog do e-squade.
 *
 * Folha PRÓPRIA, e não a do app, por duas razões que valem o arquivo extra:
 *
 * 1. O app carrega cinco folhas (tokens, base, layout, componentes, tela) e
 *    uma fonte, porque é uma aplicação que a pessoa abre e usa por uma hora.
 *    O blog é visitado por alguém que veio do Google e decide em dois
 *    segundos se fica: cada arquivo a mais é um pedido a mais antes do texto
 *    aparecer.
 *
 * 2. As classes do app (`.cartao`, `.botao`) descrevem componentes de
 *    interface logada. Reaproveitá-las aqui amarraria as duas coisas: mudar o
 *    cartão do caderno de erros mexeria no cartão de artigo.
 *
 * O prefixo `bl-` existe para a origem de cada regra ser óbvia no inspetor.
 * As cores são as mesmas do produto, escritas à mão: o blog sai antes de
 * `tokens.css` carregar em qualquer cenário, e divergirem é o risco aceito.
 */

:root {
  --bl-fundo: #F6F7F4;
  --bl-sf: #FFFFFF;
  --bl-tinta: #17201C;
  --bl-tinta2: #4A5651;
  --bl-tinta3: #9AA39F;
  --bl-linha: #E1E6E3;
  --bl-verde: #1F6F5C;
  --bl-verde-claro: #EAF3EF;
  --bl-laranja: #E8833A;
  --bl-laranja-tinta: #2A1405;
  --bl-areia: #FBF3E2;
  --bl-areia-linha: #EBD9AE;
  --bl-areia-tinta: #8A6A1C;
  --bl-sombra: 0 1px 2px rgba(23, 32, 28, 0.06);
  --bl-raio: 18px;
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bl-fundo);
  color: var(--bl-tinta);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block }
a { color: inherit; text-decoration: none }
h1, h2, h3 { letter-spacing: -0.02em; text-wrap: balance }

.bl-faixa {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------- topo --- */
.bl-topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bl-sf);
  border-bottom: 1px solid var(--bl-linha);
}

.bl-topo .bl-faixa {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.bl-marca { display: flex; align-items: center; gap: 10px }

.bl-logo {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--bl-verde);
  color: #FFF;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bl-nome { font-size: 19px; font-weight: 800 }
.bl-nome span { font-weight: 600; color: var(--bl-verde) }

.bl-nav {
  flex: 1 1 260px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
}

.bl-busca { display: flex; align-items: center }
.bl-busca label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.bl-busca input {
  width: 190px;
  height: 38px;
  border: 1px solid var(--bl-linha);
  border-radius: 19px;
  background: var(--bl-fundo);
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
}

.bl-cta,
.bl-botao {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}

.bl-cta { background: var(--bl-verde); color: #FFF }
.bl-botao { background: var(--bl-verde); color: #FFF }
.bl-botao--laranja { background: var(--bl-laranja); color: var(--bl-laranja-tinta) }

/* ------------------------------------------------------------ colunas --- */
.bl-colunas {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding-top: 28px;
  padding-bottom: 56px;
}

.bl-principal { flex: 1 1 620px; min-width: 0; display: flex;
                flex-direction: column; gap: 28px }
.bl-lado { flex: 0 1 300px; display: flex; flex-direction: column; gap: 20px }
.bl-pilha { display: flex; flex-direction: column; gap: 40px;
            padding-top: 40px; padding-bottom: 56px }

.bl-cabeca h1 { margin: 0 0 6px; font-size: 32px }
.bl-cabeca p { margin: 0; color: var(--bl-tinta2) }
.bl-secao { margin: 0 0 14px; font-size: 22px; font-weight: 800 }
.bl-vazio { color: var(--bl-tinta2); background: var(--bl-sf);
            border-radius: var(--bl-raio); padding: 28px; text-align: center }
.bl-rotulo { font-size: 12px; font-weight: 800; letter-spacing: 0.06em }

/* ------------------------------------------------------------ cartões --- */
.bl-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.bl-cartao {
  background: var(--bl-sf);
  border-radius: var(--bl-raio);
  box-shadow: var(--bl-sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bl-cartao__capa {
  display: block;
  height: 150px;
  background: var(--bl-verde);
  position: relative;
  overflow: hidden;
}

.bl-cartao__capa img { width: 100%; height: 100%; object-fit: cover }

.bl-cartao__sem-capa {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.22);
}

.bl-cartao__meio { padding: 16px 18px 18px; display: flex;
                   flex-direction: column; gap: 8px; flex: 1 }
.bl-cartao__editoria { font-size: 12px; font-weight: 800; color: var(--bl-verde) }
.bl-cartao__meio h2 { margin: 0; font-size: 26px; line-height: 1.15 }
.bl-cartao__meio h3 { margin: 0; font-size: 17px; line-height: 1.3 }
.bl-cartao__sub { font-size: 15px; color: var(--bl-tinta2); line-height: 1.55 }
.bl-cartao__meta { font-size: 13px; color: var(--bl-tinta2); margin-top: auto }

/* O destaque é horizontal no desktop e empilha no celular, pela mesma regra
   de embrulho das outras grades: capa alta e título grande não convivem em
   360px de largura. */
.bl-cartao--destaque { flex-direction: row; flex-wrap: wrap }
.bl-cartao--destaque .bl-cartao__capa { flex: 1 1 320px; height: auto;
                                        min-height: 260px }
.bl-cartao--destaque .bl-cartao__meio { flex: 1 1 320px; padding: 28px }

.bl-selo-pat {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--bl-areia);
  color: var(--bl-areia-tinta);
}

.bl-guias { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 12px }
.bl-guia { background: var(--bl-sf); border-radius: 16px; box-shadow: var(--bl-sombra);
           padding: 18px; display: flex; flex-direction: column; gap: 4px }
.bl-guia span { font-size: 13px; color: var(--bl-tinta2) }
.bl-guia__n { font-size: 12px; font-weight: 700; color: var(--bl-verde) }

/* ------------------------------------------------------------- lateral --- */
.bl-convite, .bl-lidos, .bl-boletim, .bl-caixa, .bl-sumario {
  background: var(--bl-sf);
  border-radius: var(--bl-raio);
  box-shadow: var(--bl-sombra);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bl-convite h2 { margin: 0; font-size: 18px; line-height: 1.25 }
.bl-convite p { margin: 0; font-size: 14px; color: var(--bl-tinta2) }
.bl-convite--verde { background: var(--bl-verde); color: #FFF }
.bl-convite--verde .bl-rotulo { color: #F6C9A5 }

.bl-lidos h2, .bl-boletim h2, .bl-sumario strong { margin: 0; font-size: 16px;
                                                   font-weight: 800 }
.bl-lidos a { display: flex; gap: 12px; padding: 10px 0;
              border-top: 1px solid #EEF1EF; font-size: 14px; font-weight: 700;
              line-height: 1.35 }
.bl-lidos a:first-of-type { border-top: 0 }
.bl-lidos__n { font-size: 22px; font-weight: 800; color: #C9D0CC; min-width: 22px;
               font-variant-numeric: tabular-nums }

.bl-boletim { background: #FDEBDD; box-shadow: none }
.bl-boletim h2 { color: var(--bl-laranja-tinta) }
.bl-boletim form { display: flex; flex-direction: column; gap: 10px }
.bl-boletim label { font-size: 13px; font-weight: 700 }
.bl-boletim input { height: 44px; border: 0; border-radius: 22px; padding: 0 14px;
                    font: inherit; font-size: 14px }
.bl-boletim button { min-height: 44px; border: 0; border-radius: 22px;
                     background: var(--bl-tinta); color: #FFF; font: inherit;
                     font-size: 14px; font-weight: 800; cursor: pointer }
.bl-boletim__recado, .bl-formulario__recado { margin: 0; font-size: 13px;
                                              font-weight: 700 }

.bl-sumario { gap: 2px; position: sticky; top: 92px }
.bl-sumario a { padding: 8px 0 8px 12px; border-left: 2px solid var(--bl-linha);
                font-size: 14px; font-weight: 600; color: var(--bl-tinta2) }
.bl-sumario a:hover { color: var(--bl-tinta); border-left-color: var(--bl-verde) }

/* ------------------------------------------------------------ anúncio --- */
.bl-ad-topo { padding-top: 20px }

.bl-ad {
  border-radius: 14px;
  background: var(--bl-sf);
  border: 1px solid var(--bl-linha);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  text-align: center;
}

/* O selo nunca é opcional: anúncio sem rótulo é o que faz um leitor
   desconfiar de tudo o mais que ele leu na página. */
.bl-ad__selo {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--bl-tinta3);
}

.bl-ad--vago { border-style: dashed; border-color: #C9D0CC }
.bl-ad--vago a { font-size: 15px; font-weight: 800; color: var(--bl-verde) }
.bl-ad__medida { font-size: 12px; color: var(--bl-tinta3);
                 font-variant-numeric: tabular-nums }
.bl-ad__titulo { font-size: 16px; font-weight: 800 }
.bl-ad__desc { font-size: 13px; color: var(--bl-tinta2) }

/* ------------------------------------------------------------- artigo --- */
.bl-artigo { flex: 1 1 640px; min-width: 0; max-width: 760px; display: flex;
             flex-direction: column; gap: 20px }
.bl-migalha { font-size: 13px; color: var(--bl-tinta2) }
.bl-artigo h1 { margin: 0; font-size: 40px; line-height: 1.1 }
.bl-linha-fina { margin: 0; font-size: 19px; line-height: 1.55;
                 color: var(--bl-tinta2) }

.bl-assinatura { display: flex; flex-wrap: wrap; gap: 4px 12px;
                 padding-bottom: 18px; border-bottom: 1px solid var(--bl-linha);
                 font-size: 14px }
.bl-assinatura__nome { font-weight: 800; display: flex; align-items: center;
                       gap: 8px; flex-wrap: wrap }
.bl-assinatura__data { color: var(--bl-tinta2) }
.bl-credenciado { font-size: 11px; font-weight: 800; padding: 2px 7px;
                  border-radius: 7px; background: var(--bl-verde-claro);
                  color: var(--bl-verde) }

.bl-pat-aviso { background: var(--bl-areia); border: 1px solid var(--bl-areia-linha);
                border-radius: 14px; padding: 14px 16px; display: flex;
                flex-direction: column; gap: 4px; font-size: 14px }
.bl-pat-aviso strong { color: var(--bl-areia-tinta) }

.bl-capa { margin: 0; border-radius: 20px; overflow: hidden }
.bl-capa img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover }

/* O corpo em serifa, maior e com entrelinha alta. Não é estética: é texto
   longo lido em tela, e a diferença entre 1,5 e 1,75 de entrelinha é a
   diferença entre terminar e desistir no meio. */
.bl-texto {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.75;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bl-texto p { margin: 0 }
.bl-texto h2 { margin: 14px 0 0; font-family: 'Figtree', sans-serif;
               font-size: 26px; font-weight: 800; scroll-margin-top: 90px }
.bl-texto h3 { margin: 8px 0 0; font-family: 'Figtree', sans-serif;
               font-size: 20px; font-weight: 800 }
.bl-texto ul, .bl-texto ol { margin: 0; padding-left: 26px; display: flex;
                             flex-direction: column; gap: 8px }
.bl-texto blockquote { margin: 0; padding: 4px 0 4px 20px;
                       border-left: 3px solid var(--bl-verde);
                       font-size: 21px; font-style: italic }
.bl-texto figure { margin: 0 }
.bl-texto figcaption { font-family: 'Figtree', sans-serif; font-size: 13px;
                       color: var(--bl-tinta2); padding-top: 8px }
.bl-texto table { border-collapse: collapse; width: 100%;
                  font-family: 'Figtree', sans-serif; font-size: 15px }
.bl-texto th, .bl-texto td { text-align: left; padding: 10px 12px;
                             border-bottom: 1px solid var(--bl-linha) }
.bl-texto th { font-weight: 800; background: var(--bl-fundo) }

/* Tabela larga rola na própria caixa. Sem isto ela empurra a página para o
   lado no celular, que é o defeito mais comum de artigo técnico. */
.bl-rolo { overflow-x: auto; -webkit-overflow-scrolling: touch }

.bl-lei { background: var(--bl-sf); border-left: 3px solid var(--bl-tinta);
          border-radius: 0 12px 12px 0; padding: 16px 18px; font-size: 17px }
.bl-lei p { margin: 0 }
.bl-lei cite { display: block; padding-top: 8px; font-family: 'Figtree', sans-serif;
               font-size: 13px; font-style: normal; color: var(--bl-tinta2) }

.bl-app { background: var(--bl-verde); color: #FFF; border-radius: var(--bl-raio);
          padding: 20px; display: flex; gap: 16px; align-items: center;
          flex-wrap: wrap; font-family: 'Figtree', sans-serif }
.bl-app strong { flex: 1 1 240px; font-size: 18px }

.bl-tags { display: flex; gap: 8px; flex-wrap: wrap }
.bl-tags a { min-height: 32px; padding: 0 12px; border-radius: 16px;
             background: var(--bl-sf); border: 1px solid var(--bl-linha);
             display: inline-flex; align-items: center; font-size: 13px;
             font-weight: 700 }

/* ------------------------------------------- questão dentro do artigo --- */
.bl-q {
  background: var(--bl-sf);
  border: 2px solid var(--bl-verde);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.bl-q__topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.bl-q__marca { width: 32px; height: 32px; border-radius: 10px;
               background: var(--bl-verde); color: #FFF; font-size: 13px;
               font-weight: 800; display: flex; align-items: center;
               justify-content: center }
.bl-q__topo strong { flex: 1; font-size: 15px }
.bl-q__fonte { font-size: 12px; color: var(--bl-tinta2) }
.bl-q__enunciado { margin: 0; font-size: 17px; font-weight: 500 }
.bl-q__alts { display: flex; flex-direction: column; gap: 8px }

.bl-q__alt {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--bl-linha);
  border-radius: 14px;
  background: var(--bl-sf);
  font: inherit;
  text-align: left;
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}

.bl-q__letra { width: 26px; height: 26px; border-radius: 13px;
               background: var(--bl-fundo); font-size: 13px; font-weight: 800;
               display: flex; align-items: center; justify-content: center;
               flex-shrink: 0 }

/* Acerto e erro mudam de COR e de LUMINOSIDADE, e o texto do retorno diz
   qual foi: cor sozinha exclui quem não distingue verde de vermelho. */
.bl-q__alt[data-estado="certa"] { border: 2px solid #1C6B42; background: #E3F1E8 }
.bl-q__alt[data-estado="errada"] { border: 2px solid #9E3027; background: #F6E3E0 }
.bl-q__alt[disabled] { cursor: default }

.bl-q__resposta { display: flex; flex-direction: column; gap: 12px;
                  border-radius: 14px; background: var(--bl-fundo);
                  padding: 16px }
.bl-q__explicacao { margin: 0; font-size: 15px }
.bl-q__veredito { font-size: 15px; font-weight: 800 }

/* -------------------------------------------------------- barra fixa --- */
.bl-barra-fixa { position: sticky; bottom: 0; z-index: 9;
                 background: var(--bl-tinta); color: #FFF }
.bl-barra-fixa .bl-faixa { display: flex; align-items: center; gap: 16px;
                           flex-wrap: wrap; padding-top: 12px;
                           padding-bottom: 12px }
.bl-barra-fixa span { flex: 1 1 240px; font-size: 14px;
                      color: rgba(255, 255, 255, 0.78) }
.bl-barra-fixa strong { color: #FFF }

/* ------------------------------------------------------------ anuncie --- */
.bl-hero { background: var(--bl-verde); color: #FFF; padding: 56px 0 }
.bl-hero h1 { margin: 10px 0 0; font-size: 44px; line-height: 1.08;
              max-width: 760px }
.bl-hero p { margin: 14px 0 0; font-size: 18px; max-width: 620px;
             color: rgba(255, 255, 255, 0.85) }
.bl-hero .bl-rotulo { background: var(--bl-laranja);
                      color: var(--bl-laranja-tinta); padding: 5px 11px;
                      border-radius: 12px; display: inline-block }

.bl-numeros { margin-top: -26px; background: var(--bl-sf); border-radius: 20px;
              box-shadow: 0 8px 24px rgba(23, 32, 28, 0.08); padding: 22px 26px;
              display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
              gap: 20px }
.bl-numeros strong { display: block; font-size: 28px; font-weight: 800;
                     font-variant-numeric: tabular-nums }
.bl-numeros span { font-size: 14px; color: var(--bl-tinta2) }

.bl-formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
               gap: 16px }
.bl-formato { background: var(--bl-sf); border-radius: 20px;
              box-shadow: var(--bl-sombra); padding: 20px; display: flex;
              flex-direction: column; gap: 8px }
.bl-formato__topo { display: flex; justify-content: space-between; gap: 10px;
                    align-items: baseline }
.bl-formato__topo h3 { margin: 0; font-size: 17px }
.bl-formato__topo span { font-size: 12px; font-weight: 700;
                         color: var(--bl-tinta2); white-space: nowrap }
.bl-formato p { margin: 0; font-size: 14px; color: var(--bl-tinta2) }
.bl-formato__estado { margin-top: auto; font-size: 13px; font-weight: 800;
                      color: var(--bl-verde) }

.bl-duplas { display: flex; gap: 16px; flex-wrap: wrap }
.bl-duplas .bl-caixa { flex: 1 1 320px }
.bl-caixa h2 { margin: 0; font-size: 20px }
.bl-caixa ul { margin: 0; padding-left: 20px; display: flex;
               flex-direction: column; gap: 8px; color: var(--bl-tinta2) }
.bl-caixa p { margin: 0; color: var(--bl-tinta2) }

.bl-formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                 gap: 14px }
.bl-formulario label { display: flex; flex-direction: column; gap: 6px;
                       font-size: 13px; font-weight: 700 }
.bl-formulario input, .bl-formulario select, .bl-formulario textarea {
  min-height: 44px; border: 1px solid var(--bl-linha); border-radius: 12px;
  padding: 10px 12px; font: inherit; font-size: 15px; background: var(--bl-sf);
}
.bl-formulario__largo { grid-column: 1 / -1 }
.bl-formulario button { grid-column: 1 / -1; min-height: 48px; border: 0;
                        border-radius: 24px; background: var(--bl-verde);
                        color: #FFF; font: inherit; font-size: 15px;
                        font-weight: 800; cursor: pointer }
.bl-formulario__recado { grid-column: 1 / -1 }

/* ------------------------------------------------------------- rodapé --- */
.bl-rodape { background: var(--bl-sf); border-top: 1px solid var(--bl-linha) }
.bl-rodape .bl-faixa { padding-top: 32px; padding-bottom: 32px; display: flex;
                       gap: 20px; justify-content: space-between;
                       align-items: center; flex-wrap: wrap; font-size: 14px;
                       color: var(--bl-tinta2) }
.bl-marca-pe { display: flex; align-items: center; gap: 10px }
.bl-marca-pe .bl-logo { width: 28px; height: 28px; border-radius: 9px;
                        font-size: 12px }
.bl-rodape nav { display: flex; gap: 20px; flex-wrap: wrap }
.bl-destaque { font-weight: 800; color: var(--bl-verde) }

/* ---------------------------------------------------------- no celular --- */
@media (max-width: 900px) {
  /* A lateral desce para depois do conteúdo. Ela é apoio — convite, mais
     lidos, anúncio — e no celular vir antes do texto é empurrar o artigo
     para fora da primeira tela de quem veio da busca ler justamente ele. */
  .bl-colunas { flex-direction: column }
  .bl-lado { flex: 1 1 auto; width: 100% }
  .bl-sumario { position: static }
  .bl-artigo h1 { font-size: 30px }
  .bl-hero h1 { font-size: 32px }
  .bl-hero { padding: 40px 0 }
  .bl-texto { font-size: 18px }
  .bl-nav { order: 3; flex-basis: 100%; gap: 14px; overflow-x: auto;
            white-space: nowrap }
  .bl-busca input { width: 100% }
  .bl-busca { flex: 1 1 140px }
}

/* ===================================================================
   AS PECAS DO BRIEFING QUE FALTAVAM
   =================================================================== */

/* ------------------------------------------ faixa de contagem regressiva --
 * A primeira linha da pagina, antes do menu. Escura para nao competir com o
 * conteudo e para o laranja do selo ter contraste suficiente.
 */
.bl-faixa-topo { background: var(--bl-tinta); color: #FFF }

.bl-faixa-topo .bl-faixa {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 13px;
}

.bl-faixa-topo__selo {
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bl-laranja);
  color: var(--bl-laranja-tinta);
  flex-shrink: 0;
}

.bl-faixa-topo__texto { flex: 1 1 200px; color: rgba(255, 255, 255, 0.85) }
.bl-faixa-topo__cta { font-weight: 800; color: #FFF; white-space: nowrap }

/* ------------------------------------------------- bloco de pratica ----- */
.bl-pratica {
  background: var(--bl-verde);
  color: #FFF;
  border-radius: 22px;
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.bl-pratica__lado { flex: 1 1 300px; display: flex; flex-direction: column;
                    gap: 8px }
.bl-pratica__lado .bl-rotulo { color: #F6C9A5 }
.bl-pratica h2 { margin: 0; font-size: 26px; line-height: 1.15 }
.bl-pratica p { margin: 0; font-size: 15px; line-height: 1.5;
                color: rgba(255, 255, 255, 0.82) }
.bl-pratica__fonte { font-size: 12px; color: rgba(255, 255, 255, 0.6) }

.bl-pratica__caixa {
  flex: 1 1 320px;
  background: var(--bl-sf);
  color: var(--bl-tinta);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bl-pratica__enunciado { margin: 0; font-size: 15px; line-height: 1.5;
                         font-weight: 500 }
.bl-pratica__alts { display: flex; flex-direction: column; gap: 6px }

.bl-pratica__alt {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--bl-linha);
  border-radius: 12px;
  background: var(--bl-sf);
  font: inherit;
  font-size: 14px;
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.bl-pratica__letra {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--bl-fundo);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bl-pratica__alt[data-estado="certa"] { border: 2px solid #1C6B42;
                                        background: #E3F1E8 }
.bl-pratica__alt[data-estado="errada"] { border: 2px solid #9E3027;
                                         background: #F6E3E0 }
.bl-pratica__alt[disabled] { cursor: default }

.bl-pratica__resposta { display: flex; flex-direction: column; gap: 10px;
                        border-top: 1px solid var(--bl-linha); padding-top: 12px }
.bl-pratica__explicacao { margin: 0; font-size: 14px; line-height: 1.5 }
.bl-pratica__veredito { font-size: 14px; font-weight: 800 }

/* ----------------------------------------------- selos sobre a capa ----- */
.bl-selo-destaque {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--bl-laranja);
  color: var(--bl-laranja-tinta);
}

.bl-cartao__capa .bl-selo-pat { position: absolute; top: 12px; left: 12px }
.bl-cartao--pat { border: 1px solid var(--bl-areia-linha) }
.bl-cartao--pat .bl-cartao__capa { background: var(--bl-areia) }

/* ------------------------------------------------------ assinatura ----- */
.bl-autor { display: flex; align-items: center; gap: 8px }

.bl-autor__av {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--bl-verde);
  color: #FFF;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bl-autor__av--g { width: 42px; height: 42px; border-radius: 21px;
                   font-size: 14px }
.bl-autor__texto { min-width: 0 }
.bl-assinatura__meio { flex: 1 1 200px; display: flex; flex-direction: column;
                       gap: 2px }

.bl-acao {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--bl-linha);
  border-radius: 18px;
  background: var(--bl-sf);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------------------------------------------- progresso de leitura --- */
/* Fica colado no topo, logo abaixo do menu fixo. Altura pequena de
   proposito: e um indicador, nao um elemento de interface. */
.bl-progresso {
  position: sticky;
  top: 68px;
  z-index: 9;
  height: 3px;
  background: #EEF1EF;
}

.bl-progresso span {
  display: block;
  height: 3px;
  width: 0;
  background: var(--bl-laranja);
  transition: width 90ms linear;
}

/* -------------------------------------------- oferta dentro do artigo --- */
.bl-oferta {
  background: var(--bl-areia);
  border: 1px solid var(--bl-areia-linha);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.bl-oferta__logo {
  width: 72px;
  height: 56px;
  border-radius: 12px;
  background: var(--bl-sf);
  color: var(--bl-areia-tinta);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bl-oferta__meio { flex: 1 1 220px; display: flex; flex-direction: column;
                   gap: 3px; font-size: 14px }
.bl-oferta__meio strong { font-size: 16px }
.bl-oferta .bl-botao { background: var(--bl-tinta) }

/* -------------------------------------- onde o formato fica na pagina --- */
/* A miniatura existe por razao comercial: quem compra espaco precisa VER a
   posicao. "300 × 600 na lateral" nao diz se fica no alto ou no fim da
   rolagem, e e exatamente essa a diferenca de preco. */
.bl-formato { flex-direction: row; gap: 16px }

.bl-mini {
  width: 88px;
  height: 112px;
  flex-shrink: 0;
  border: 1px solid var(--bl-linha);
  border-radius: 10px;
  background: var(--bl-fundo);
  position: relative;
  overflow: hidden;
}

.bl-mini__topo { position: absolute; left: 6%; right: 6%; top: 5%; height: 7%;
                 border-radius: 3px; background: var(--bl-linha) }
.bl-mini__lado { position: absolute; left: 6%; width: 50%; top: 18%;
                 bottom: 5%; border-radius: 3px; background: #ECEFED }
.bl-mini__alvo { position: absolute; border-radius: 3px;
                 background: var(--bl-laranja) }

.bl-formato__meio { flex: 1; display: flex; flex-direction: column; gap: 6px }
.bl-formato__preco { font-size: 14px; font-weight: 800;
                     color: var(--bl-areia-tinta) }

@media (max-width: 700px) {
  .bl-pratica { padding: 20px }
  .bl-progresso { top: 0 }
}