/* Visual dos cards. Depende das variáveis de cor da página:
   --ink --muted --line --accent --accent-soft --ok --ok-soft --no --no-soft --warn --warn-soft --adj --adj-soft */

.cartao { font-size: 16px; line-height: 1.75; }
.cartao p { margin: 0; }
.cartao ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.cartao ul.cx-enum { list-style: none; padding-left: .2em; }
/* negrito com marca-texto: só o peso quase não se via (15/10). Amarelo e na altura toda (19/10):
   o lilás só embaixo parecia o sublinhado dos conceitos (links) */
.cartao b, .cartao strong { font-weight: 700; color: var(--ink); padding: 0 1px; border-radius: 3px;
  background: color-mix(in srgb, var(--ouro) 24%, transparent);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cartao .cx-destaque > b:first-child, .cartao .cx-tipo b, .cartao .cx-tabela th b { background: none; padding: 0; }

.cx-tipo { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; margin-bottom: 10px; }

.cx-frente { display: grid; gap: 14px; font-weight: 500; font-size: 17px; }

.cx-alts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.cx-alts li { display: flex; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; line-height: 1.6; }
.cx-alts li > span { flex: none; font-weight: 700; color: var(--muted); }
.cx-alt-txt { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.cx-alts li.cx-certa { background: var(--ok-soft); border-color: transparent; }
.cx-alts li.cx-certa > span { color: var(--ok); }

.cx-sep { height: 1px; background: var(--line); margin: 18px 0 16px; }

.cx-gabarito { display: inline-block; font-weight: 700; padding: 3px 12px; border-radius: 8px; margin-bottom: 14px; }
.cx-certo, .cx-outro { background: var(--ok-soft); color: var(--ok); }
.cx-errado { background: var(--no-soft); color: var(--no); }

.cx-explicacao { display: grid; gap: 16px; }
.cx-destaque { padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); border-left: 3px solid var(--accent); }
.cx-destaque b { margin-right: 4px; }
.cx-pegadinha, .cx-atenção, .cx-cuidado { background: var(--warn-soft); }
.cx-pegadinha b, .cx-atenção b, .cx-cuidado b { color: var(--warn); }
.cx-pegadinha, .cx-atenção, .cx-cuidado { border-left-color: var(--warn); }
.cx-macete, .cx-dica, .cx-lembre { background: var(--ok-soft); border-left-color: var(--ok); }
.cx-macete b, .cx-dica b, .cx-lembre b { color: var(--ok); }
.cx-exemplo { background: var(--adj-soft); border-left-color: var(--adj); }
.cx-exemplo b { color: var(--adj); }
.cx-tipo b { color: var(--accent); font-weight: 800; }
.cx-adriana { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); border-left-color: #c86fd8; }
.cx-adriana b { color: #c86fd8; }

/* Seções coloridas dos resumos ("## Título") e tabelas ("a | b") */
.cx-sec { display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: 14px; border: 1px solid var(--line); border-top: 4px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.cx-sec h4 { margin: 0; font-size: 16px; color: var(--accent); }
.cx-sec-1 { border-top-color: var(--ok); background: color-mix(in srgb, var(--ok-soft) 45%, transparent); } .cx-sec-1 h4 { color: var(--ok); }
.cx-sec-2 { border-top-color: var(--adj); background: color-mix(in srgb, var(--adj-soft) 45%, transparent); } .cx-sec-2 h4 { color: var(--adj); }
.cx-sec-3 { border-top-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 45%, transparent); } .cx-sec-3 h4 { color: var(--warn); }
.cx-tabela { overflow-x: auto; }
.cx-tabela table { border-collapse: collapse; width: 100%; font-size: 15px; }
.cx-tabela th, .cx-tabela td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cx-tabela th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.cx-dica { display: flex; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: var(--accent-soft); color: var(--ink); }

.cx-polemica { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--adj-soft); display: grid; gap: 12px; }
.cx-polemica-titulo { font-weight: 700; color: var(--adj); font-size: 14px; }

.cx-aprofundar { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.cx-aprofundar summary { cursor: pointer; font-weight: 600; color: var(--accent); }
/* margem em vez de gap: o <details> não respeita o gap do grid (14/10) */
.cx-aprofundar[open] > * + * { margin-top: 14px; }