/* Callout — destaque com borda à esquerda (info / dica / atenção). */
.callout {
  border-left: 3px solid var(--cor-primaria);
  background: var(--cor-primaria-tint);
  padding: var(--esp-4);
  border-radius: var(--raio-sm);
}
.callout__titulo { font-weight: 700; margin-bottom: var(--esp-1); }
.callout--dica { border-left-color: var(--cor-acento); background: color-mix(in srgb, var(--cor-acento) 10%, transparent); }
.callout--atencao { border-left-color: var(--cor-perigo); background: color-mix(in srgb, var(--cor-perigo) 10%, transparent); }