/* ============================================================================
   BLOCOS.CSS · blocos interativos do artigo (contrato de blocos v2, 15/09/2026)
   Contrato: content/CONTRATO_BLOCOS.md. Classes bl-* (este arquivo) + a API do
   assets/site.css (.cartao, .escolha, .campo, .fx, .t-rotulo, .t-2, .btn).
   Ganchos de JS são data-*; nada aqui depende de JS para ler o conteúdo.
   Escala de severidade: manual v4 §11.4.1 (nota nunca em letra vermelha).
   ============================================================================ */

/* ---------- ritmo dos blocos dentro do texto ---------- */
.art-conteudo .bl{ margin-block:64px; }
.art-conteudo .bl-figura{ margin-block:40px; }
.art-conteudo .bl-expandir{ margin-block:32px; }
.bl-grupo{ margin:0; padding:0; border:0; min-width:0; }
.bl-grupo legend{ padding:0; }
.bl-titulo{ margin-top:8px; }
@keyframes bl-surge{ from{ opacity:0; transform:translateY(6px); } }

/* ---------- destaque ---------- */
.bl-destaque{ padding-left:24px; box-shadow:inset 2px 0 0 var(--u-border-emphasis); }
.bl-destaque__texto{
  font-family:var(--font-display); font-size:clamp(1.375rem, 1.15rem + .9vw, 1.75rem); line-height:1.3;
  letter-spacing:-.022em; font-weight:600; color:var(--u-text); text-wrap:balance;
}
.bl-destaque__acoes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
@media (max-width:767px){ .bl-destaque{ padding-left:16px; } }

/* ---------- opções (checkpoint e diagnóstico): rótulo inteiro é o alvo ---------- */
.bl-opcoes{ display:grid; gap:8px; margin-top:16px; }
.escolha.bl-opcao{
  align-items:flex-start; min-height:56px; padding:16px; border-radius:var(--r-md);
  background:var(--u-well); color:var(--u-text); font-size:1rem; line-height:1.45;
  box-shadow:inset 0 0 0 1px transparent;
  transition:background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.escolha.bl-opcao:hover{ background:#17171A; box-shadow:inset 0 0 0 1px var(--u-border-default); }
.escolha.bl-opcao:has(input:checked){ background:var(--u-surface-hi); box-shadow:inset 0 0 0 2px #F0F0F0; }
.escolha.bl-opcao:has(input:focus-visible){ outline:2px solid var(--u-focus); outline-offset:2px; }
.escolha.bl-opcao input:focus-visible{ outline:none; }
.bl-opcao__texto{ min-width:0; }

/* ---------- checkpoint (pare e pense) ---------- */
.bl-checkpoint__pergunta{ display:block; }
.bl-checkpoint__pergunta .t-rotulo{ display:block; }
.bl-checkpoint__enunciado{
  display:block; margin-top:8px; font-family:var(--font-display); font-size:1.25rem; line-height:1.3;
  letter-spacing:-.02em; font-weight:600; color:var(--u-text); text-wrap:balance;
}
.bl-retorno{ display:none; margin-top:16px; padding:16px 20px; border-radius:var(--r-md); background:var(--u-well); color:var(--u-text); box-shadow:inset 3px 0 0 #F0F0F0; }
.bl-retorno p + p{ margin-top:8px; }
.bl-retorno a{ color:var(--u-text); text-decoration-color:var(--u-border-emphasis); }
.bl-retorno.is-visivel{ display:block; animation:bl-surge var(--t-base) var(--ease); }
/* sem JavaScript o retorno aparece do mesmo jeito */
.bl-checkpoint:has(input[value="0"]:checked) [data-bl-retorno="0"],
.bl-checkpoint:has(input[value="1"]:checked) [data-bl-retorno="1"],
.bl-checkpoint:has(input[value="2"]:checked) [data-bl-retorno="2"],
.bl-checkpoint:has(input[value="3"]:checked) [data-bl-retorno="3"]{ display:block; }

/* ---------- diagnóstico (quiz) ---------- */
.bl-quiz__passo{ margin-top:16px; font-size:.875rem; color:var(--u-text-3); font-variant-numeric:tabular-nums; }
.bl-quiz__pergunta{ margin-top:16px; }
.bl-quiz__pergunta + .bl-quiz__pergunta{ margin-top:32px; }
.bl-quiz.is-interativo .bl-quiz__pergunta{ display:none; margin-top:16px; }
.bl-quiz.is-interativo .bl-quiz__pergunta.is-atual{ display:block; animation:bl-surge var(--t-base) var(--ease); }
.bl-quiz__enunciado{ display:block; font-family:var(--font-display); font-size:1.1875rem; line-height:1.35; letter-spacing:-.02em; font-weight:600; color:var(--u-text); text-wrap:pretty; }
.bl-quiz__enunciado:focus{ outline:none; }
.bl-quiz__enunciado:focus-visible{ outline:2px solid var(--u-focus); outline-offset:4px; border-radius:4px; }
.bl-quiz__numero{ color:var(--u-text-3); font-variant-numeric:tabular-nums; }
.bl-quiz__nav{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:24px; }
.bl-quiz__nav .btn:disabled{ opacity:.5; }
.bl-quiz__resultado{ margin-top:8px; }
.bl-quiz__resultado:focus{ outline:none; }
.bl-quiz.is-concluido .bl-quiz__resultado{ animation:bl-surge var(--t-slow) var(--ease); }
.bl-sev{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:16px; }
.bl-sev__nota{
  display:inline-flex; align-items:baseline; gap:4px; padding:12px 20px; border-radius:var(--r-md);
  font-family:var(--font-display); font-size:2.5rem; line-height:1; letter-spacing:-.03em; font-weight:700; font-variant-numeric:tabular-nums;
}
.bl-sev__total{ font-size:1rem; font-weight:600; letter-spacing:0; }
.bl-sev__rotulo{ display:inline-flex; align-items:center; min-height:32px; padding:0 16px; border-radius:var(--r-pill); font-size:.9375rem; font-weight:700; }
.bl-sev--critico .bl-sev__nota, .bl-sev--critico .bl-sev__rotulo{ background:#DD0B17 var(--u-gradient-block); color:#FFFFFF; }
.bl-sev--atencao .bl-sev__nota, .bl-sev--atencao .bl-sev__rotulo{ background:#FF9F0A; color:#0A0A0C; }
.bl-sev--saudavel .bl-sev__nota, .bl-sev--saudavel .bl-sev__rotulo{ background:#2ED3A7; color:#0A0A0C; }
.bl-sev__faixa{ margin-top:8px; font-size:.875rem; color:var(--u-text-3); }
.bl-quiz__faixa-titulo{ margin-top:24px; font-family:var(--font-display); font-size:1.5rem; line-height:1.2; letter-spacing:-.025em; font-weight:600; color:var(--u-text); }
.bl-quiz__faixa-texto{ margin-top:8px; color:var(--u-text-2); }
.bl-quiz__faixa-texto p + p{ margin-top:8px; }
.bl-sev-legenda{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; list-style:none; padding:0; }
.bl-sev-legenda__item{ display:inline-flex; align-items:baseline; gap:8px; padding:8px 12px; border-radius:var(--r-sm); font-size:.8125rem; line-height:1.3; }
.bl-sev-legenda__item b{ font-weight:700; color:inherit; } /* o site.css pinta <b> com a cor do texto claro */
.bl-sev-legenda__item--critico{ background:#DD0B17 var(--u-gradient-block); color:#FFFFFF; }
.bl-sev-legenda__item--atencao{ background:#FF9F0A; color:#0A0A0C; }
.bl-sev-legenda__item--saudavel{ background:#2ED3A7; color:#0A0A0C; }
.bl-quiz__acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:24px; }

/* ---------- calculadora ---------- */
.bl-calc__campos{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:24px; }
.bl-calc__campos .campo + .campo{ margin-top:0; }
@media (min-width:640px){ .bl-calc__campos{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:end; } }
.bl-calc__entrada{ position:relative; display:flex; align-items:center; }
.bl-calc__entrada .fx{ font-variant-numeric:tabular-nums; }
.bl-calc__prefixo, .bl-calc__sufixo{ position:absolute; top:50%; transform:translateY(-50%); color:var(--u-text-3); font-size:1rem; pointer-events:none; }
.bl-calc__prefixo{ left:16px; }
.bl-calc__sufixo{ right:16px; }
.bl-calc__entrada--moeda .fx{ padding-left:48px; }
.bl-calc__entrada--percentual .fx{ padding-right:40px; }
.bl-calc__formula{ margin-top:16px; font-size:.875rem; line-height:1.5; color:var(--u-text-3); }
.bl-calc__formula-rotulo{ font-weight:600; color:var(--u-text-2); }
.bl-calc__resultado, .bl-calc__vazio{ margin-top:24px; padding:20px 24px; border-radius:var(--r-md); background:var(--u-well); font-size:1.0625rem; line-height:1.45; color:var(--u-text); }
.bl-calc__vazio{ color:var(--u-text-3); }
.bl-calc__valor{ display:inline-block; font-family:var(--font-display); font-size:1.75rem; line-height:1.1; letter-spacing:-.025em; font-weight:700; color:var(--u-text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bl-calc__valor--moeda{ color:var(--u-red-ink-dark); }

/* ---------- checklist ---------- */
.bl-checklist__itens{ display:grid; gap:4px; margin-top:16px; }
.escolha.bl-checklist__escolha{
  min-height:48px; padding:12px 16px; border-radius:var(--r-md); color:var(--u-text-2); font-size:1rem;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.escolha.bl-checklist__escolha:hover{ background:var(--u-surface-hover); }
.escolha.bl-checklist__escolha:has(input:checked){ color:var(--u-text); }
.bl-checklist__contador{ margin-top:16px; font-size:.9375rem; color:var(--u-text-3); font-variant-numeric:tabular-nums; }
.bl-checklist.is-completo .bl-checklist__contador{ color:var(--u-text); font-weight:600; }

/* ---------- perguntas frequentes ---------- */
.bl-faq__titulo{ font-size:clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height:1.15; letter-spacing:-.03em; margin-bottom:24px; }
.bl-faq__lista{ display:grid; gap:8px; }
.bl-faq__item{ border-radius:var(--r-md); background:var(--u-surface); }
.bl-faq__pergunta, .bl-expandir__titulo{
  display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:16px 24px;
  font-weight:600; line-height:1.4; color:var(--u-text); cursor:pointer; list-style:none; border-radius:var(--r-md);
}
.bl-faq__pergunta::-webkit-details-marker, .bl-expandir__titulo::-webkit-details-marker{ display:none; }
.bl-faq__pergunta::after, .bl-expandir__titulo::after{
  content:""; flex:0 0 14px; width:14px; height:14px;
  background:linear-gradient(currentColor, currentColor) center/100% 2px no-repeat, linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
  transition:transform var(--t-base) var(--ease);
}
details[open] > .bl-faq__pergunta::after, details[open] > .bl-expandir__titulo::after{ background:linear-gradient(currentColor, currentColor) center/100% 2px no-repeat; }
.bl-faq__pergunta:focus-visible, .bl-expandir__titulo:focus-visible{ outline:2px solid var(--u-focus); outline-offset:2px; }
.bl-faq__pergunta:hover, .bl-expandir__titulo:hover{ background:var(--u-surface-hover); }
.bl-faq__resposta, .bl-expandir__corpo{ padding:0 24px 24px; color:var(--u-text-2); }
.bl-faq__resposta p + p, .bl-expandir__corpo p + p{ margin-top:8px; }
.bl-faq__resposta a, .bl-expandir__corpo a{ color:var(--u-text); text-decoration-color:var(--u-border-emphasis); }
.art-conteudo .bl-faq{ margin-top:64px; }

/* ---------- expandir (aprofundar sem sair do lugar) ---------- */
.bl-expandir{ border-radius:var(--r-md); box-shadow:inset 0 0 0 1px var(--u-border-default); }
.bl-expandir[open]{ background:var(--u-well); }

/* ---------- figura ---------- */
.bl-figura__legenda{ margin-top:8px; font-size:.8125rem; line-height:1.45; color:var(--u-text-3); }
.bl-figura__credito{ color:var(--u-text-3); }
/* Alvo de 44 px no credito e na legenda sem mudar a altura da linha (manual: alvo >= 44). */
.bl-figura__legenda a{ display:inline-block; padding-block:14px; margin-block:-14px; }
.bl-figura__credito a{ color:inherit; text-decoration-color:var(--u-border-emphasis); }

/* ---------- método e fontes ---------- */
.art-conteudo .bl-fontes{ margin-top:64px; }
.bl-fontes__titulo{ font-size:clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height:1.15; letter-spacing:-.03em; }
.bl-fontes__lista{ margin-top:16px; padding-left:24px; font-size:.9375rem; line-height:1.5; }
.bl-fontes__item + .bl-fontes__item{ margin-top:8px; }
.bl-fontes__item::marker{ color:var(--u-text-3); }
.bl-fontes__item a{ color:var(--u-text); text-decoration:underline; text-decoration-color:var(--u-border-emphasis); text-underline-offset:.2em; }
.bl-fontes__item a:hover{ text-decoration-color:currentColor; }
.bl-fontes__item a{ display:inline-block; padding-block:13px; margin-block:-13px; }
.bl-fontes__data{ color:var(--u-text-3); }

/* ---------- banner de produto ---------- */
.bl-banner__desc{ margin-top:8px; color:var(--u-text-2); }
.bl-banner__rodape{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; }
.bl-banner__preco{ font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--u-text); }

/* ---------- impressão ---------- */
@media print{
  .bl-destaque__acoes, .bl-quiz__nav, .bl-quiz__acoes, .bl-sev-legenda, .bl-banner .btn{ display:none !important; }
  .cartao.bl, .bl-faq__item, .bl-expandir, .bl-retorno, .bl-calc__resultado, .bl-calc__vazio, .escolha.bl-opcao{
    background:#FFFFFF !important; color:#18181B !important; box-shadow:inset 0 0 0 1px #D8D8DC !important;
  }
  .bl{ break-inside:avoid; }
  .bl-quiz.is-interativo .bl-quiz__pergunta{ display:block !important; }
  .bl-destaque__texto, .bl-checkpoint__enunciado, .bl-quiz__enunciado, .bl-faq__pergunta, .bl-expandir__titulo, .bl-quiz__faixa-titulo, .bl-calc__valor, .bl-banner__preco{ color:#18181B !important; }
  .bl-sev__nota, .bl-sev__rotulo{ box-shadow:inset 0 0 0 2px #18181B !important; background:#FFFFFF !important; color:#18181B !important; }
}