/* A tela "Virada do ponto" (02/11/2026, B0): vale nos dois visuais. As cores são as da família da Interpartner: no
   visual novo vêm das variáveis do marca.css (--verde, --tinta...); no de sempre, onde elas não existem, valem as
   mesmas cores escritas UMA vez aqui, no bloco de tokens. Maquete: desenho/compasso-virada.html. */
.virada {
  --vr-verde: var(--verde, #008D45); --vr-verde-mata: var(--verde-mata, #006B33); --vr-tinta: var(--tinta, #15241C);
  --vr-grafite: var(--grafite, #728579); --vr-fio: var(--fio, #E4ECE7); --vr-suave: var(--suave, #E9F6EF);
  --vr-superficie: var(--superficie, #FFFFFF); --vr-superficie-suave: var(--superficie-suave, #F4FAF6);
  --vr-ambar: var(--ambar, #D98A2B); --vr-ambar-suave: var(--ambar-suave, #FBF1E3); --vr-ambar-texto: #8A5513;
  --vr-decisao: #E8EEF6; --vr-decisao-texto: #2D4A6B; --vr-sombra: rgba(0, 79, 37, .08);
  max-width: 980px;
}
.virada-topo h1 { font-size: 24px; font-weight: 800; color: var(--vr-tinta); margin: 0; }
.virada-topo p { color: var(--vr-grafite); font-weight: 600; font-size: 13.5px; margin: 4px 0 0; }
.virada-faixa { margin: 16px 0 14px; background: var(--vr-ambar-suave); color: var(--vr-ambar-texto); border-left: 5px solid var(--vr-ambar);
  border-radius: 14px; padding: 12px 16px; font-weight: 700; font-size: 13.5px; line-height: 1.45; }
.virada-manchete { font-size: 15.5px; font-weight: 600; margin: 4px 0 16px; color: var(--vr-tinta); }
.virada-manchete b { font-weight: 800; }
.virada-bloco { background: var(--vr-superficie); border-radius: 14px; box-shadow: 0 4px 14px var(--vr-sombra); padding: 18px 20px; margin-bottom: 16px; }
.virada-bloco h2 { font-size: 18px; font-weight: 800; margin: 0 0 10px; color: var(--vr-tinta); }
.virada-fatos { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.virada-fatos li { background: var(--vr-superficie-suave); border-radius: 10px; padding: 10px 14px 10px 16px; border-left: 4px solid var(--vr-verde);
  font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--vr-tinta); }
.virada-fatos li.atencao, .virada-fatos li.alerta, .virada-fatos li.falha { border-left-color: var(--vr-ambar); }
.virada-criterios { list-style: none; display: grid; margin: 0; padding: 0; }
.virada-criterios li { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--vr-fio); }
.virada-criterios li:first-child { border-top: 0; }
.virada-estado { display: inline-flex; justify-content: center; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.c-feito .virada-estado { background: var(--vr-suave); color: var(--vr-verde-mata); }
.c-andamento .virada-estado, .c-atencao .virada-estado { background: var(--vr-ambar-suave); color: var(--vr-ambar-texto); }
.c-falta .virada-estado { background: var(--vr-superficie-suave); color: var(--vr-grafite); border: 1px solid var(--vr-fio); }
.c-decisao .virada-estado { background: var(--vr-decisao); color: var(--vr-decisao-texto); }
.virada-criterios h3 { font-size: 14.5px; font-weight: 700; margin: 0; color: var(--vr-tinta); }
.virada-criterios p { color: var(--vr-grafite); font-size: 13px; margin: 3px 0 0; line-height: 1.45; }
.virada-depois { color: var(--vr-grafite); font-size: 13px; font-weight: 500; max-width: 80ch; }
.virada-carregando { color: var(--vr-grafite); font-weight: 600; }
@media (max-width: 640px) { .virada-criterios li { grid-template-columns: 1fr; gap: 6px; } .virada-estado { justify-self: start; } }